Question

我正在尝试检查所有链接并更改损坏链接字段的背景颜色。这是我的功能

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');
    }
}); });}

输入字段如下所示：

<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>

出于某种原因，css没有申请。

注意：我的CheckLinks功能确实有效，但$(this).css...部分除外。（FireBug'ed）

注意：行是动态添加的

编辑：这是功能：

function UrlExists(url, cb){
    jQuery.ajax({
        url:      url,
        dataType: 'text',
        type:     'GET',
        complete:  function(xhr){
            if(typeof cb === 'function')
               cb.apply(this, [xhr.status]);
        }
    });
}

Answer 1

错误的事情。您在()的调用中未包含$(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');
      }); 
    });
}

请记住，在执行此操作时，您可能会遇到Access-Control-Allow-Origin的一些障碍。

您可能希望修改UrlExists函数以在服务器上运行代理脚本。您可以执行以下操作：

$.getJSON('checklink.php', { location: url }, function ( data ) {
  callback.apply( null, data.status );
});

在你的后端，测试URL并通过JSON发送响应：

$response = array( 
  'location' => $location, 
  'status' => $status 
);
echo json_encode( $response );

这样，您的JavaScript与后端通信，并且原始控制没有问题。

Answer 2

我的感觉是，这不再是指输入。您应该添加一个变量来存储输入，以便您可以在闭包

中访问它

var input = $(this);
UrlExists($(this).val(), function(status){
  if(status === 404){
     input.css('background-color','#FC0');
  }
});

Answer 3

该函数是否知道动态添加了行？前段时间我遇到了类似的问题。问题是jQuery不知道添加了一些内容的新行。尝试控制掉函数中$（this）下的内容并告诉我们你得到了什么结果。

jQuery - 将css样式应用于输入元素

3 个答案: