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

【问题标题】：jQuery - Applying css style to input elementjQuery - 将 css 样式应用于输入元素
【发布时间】：2012-05-02 18:33:06
【问题描述】：

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

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 没有应用。

注意：除了$(this).css... 部分外，我的 CheckLinks 功能确实有效。（萤火虫）

注意：行是动态添加的

编辑：这是功能：

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

【问题讨论】：

不，你的UrlExists()函数的第一个参数有$(this).val，而它应该有$(this).val()。
那么这是一个参考问题。你最里面的this 没有映射到当前正在测试的元素。

标签： jquery css input element

【解决方案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 就可以和你的后端进行通信，并且在源控制方面没有问题。

【讨论】：

OK 字段的背景颜色确实发生了变化。但网址没有损坏。编辑：好的，我将检查我的服务器中是否启用了它。
@xperator 您不能只使用 JavaScript 访问随机 URL。您要测试哪些网址？
他们在同一台服务器上。它们看起来像这样 http://www.dl.mysite.com/momeni/momeni-09.mp3 我使用 nginx + ISPConfig。 www.dl.mysite 在 ISPConfig 中被视为不同的站点，我正在尝试的脚本在 mysite.com/at-admin
如此有效，它们位于两个不同的域中。浏览器无法知道它们“物理上”在同一设备上
我暂时标记为已接受的答案。因为Css问题解决了。现在 url 问题与后端有关。我需要一些时间来挖掘这个。非常感谢你在这方面提供了太多信息:-)

【解决方案2】：

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

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

【讨论】：

嗯...我输入了一个有效的链接和一个损坏的链接。有效的 url 开始下载并且损坏的不会改变背景颜色。
那么你应该最终向我们公开 UrlExists() 函数:-)
您可能想发布一些内容，以便我们查看！ :)
@devnull69 暴露了^_^抱歉迟到了
对我来说仍然是一个参考问题。

【解决方案3】：

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

【讨论】：