jQuery - 将 css 样式应用于输入元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10419632/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery - Applying css style to input element
提问by xperator
I am trying to check all links and change the background color of broken links field. Here is my function
我正在尝试检查所有链接并更改损坏链接字段的背景颜色。这是我的功能
function CheckLinks(){
$('#new_post_links_table tbody>tr').find("input").each(function() {
UrlExists($(this).val(), function(status){
if(status === 404){
$(this).css('background-color','#FC0');
}
}); });}
Input fields looks like this :
输入字段如下所示：
<table id="new_post_links_table">
...
<td><input type="text" name="mp3_link[]"/></td>
<td><input type="text" name="mp4_link[]"/></td>
</tr>
</tbody>
</table>
For some reason the css is not applying.
出于某种原因，css 不适用。
Note: my CheckLinks function does work, except the $(this).css...part. (FireBug'ed)
注意：我的 CheckLinks 功能确实有效，但$(this).css...部分除外。(FireBug'ed)
Note: The rows are added dynamically
注意：行是动态添加的
EDIT : Here is the function:
编辑：这是功能：
function UrlExists(url, cb){
jQuery.ajax({
url: url,
dataType: 'text',
type: 'GET',
complete: function(xhr){
if(typeof cb === 'function')
cb.apply(this, [xhr.status]);
}
});
}
回答by Sampson
Couple things wrong. You didn't include the ()on the call to $(this).val, and your thisreference within the callback doesn't refer to the element intended.
夫妇的事情错了。您没有在()对 的调用中包含$(this).val，并且您this在回调中的引用不引用预期的元素。
function CheckLinks(){
$('#new_post_links_table tbody > tr')
.find("input")
.each(function(index, element) {
UrlExists($(this).val(), function(status){
if(status === 404) $(element).css('background-color','#FC0');
});
});
}
Keep in mind when doing this you might run into some snags with Access-Control-Allow-Origin.
请记住，在执行此操作时，您可能会遇到一些障碍Access-Control-Allow-Origin。
You might want to modify your UrlExistsfunction to run through a proxy script on your server. You could do something like the following:
您可能希望修改UrlExists函数以通过服务器上的代理脚本运行。您可以执行以下操作：
$.getJSON('checklink.php', { location: url }, function ( data ) {
callback.apply( null, data.status );
});
On your backend, test the URL and send out the response via JSON:
在您的后端，测试 URL 并通过 JSON 发送响应：
$response = array(
'location' => $location,
'status' => $status
);
echo json_encode( $response );
This way your JavaScript communicates with your back-end, and has no problem with origin control.
通过这种方式，您的 JavaScript 与您的后端通信，并且源控制没有问题。
回答by Peter Lada
My feeling is that this is no longer referring to the input. You should add a variable to store the input so you can access it within closure
我的感觉是这不再是指输入。您应该添加一个变量来存储输入，以便您可以在闭包中访问它
var input = $(this);
UrlExists($(this).val(), function(status){
if(status === 404){
input.css('background-color','#FC0');
}
});
回答by Rob
Does that function know that there are added rows dynamically? While ago I've had similar issue. Problem was that jQuery didn't know that there are added new rows with some content. Try console out what is under $(this) in function and tell us what result have You get.
该函数是否知道动态添加了行？前段时间我也遇到过类似的问题。问题是 jQuery 不知道添加了一些内容的新行。尝试控制台出 $(this) 函数中的内容，并告诉我们您得到了什么结果。
