3

到目前为止，只是试图让它根据标题中的内容重新设置每个元素的样式，它只根据第一个元素更改它，而忽略其他元素。当我使用“each()”时，它应该检查每一个，然后将颜色更改为红色表示没有蓝色表示是。

  <html>
<head>
<title>colorme</title>



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2      /jquery.js"></script>
<script>
$(document).ready(function(){


 $(".test").each(function(){ 

 var title = $(this).find('.taskName').attr("title");
    if(title =="yes") {
   $('div.taskName').css('color','blue');

    }
 else if(title =="no")  {
     $('div.taskName').css('color','red');

    }
});

});


</script>

</head>
<body>
<div class="test">
<div class="taskName" title="yes">this should  be blue</div>
<div class="taskName" title="no">this should not be blue</div>
<div class="taskName" title="yes">this should  be blue</div>
<div class="taskName" title="no">this should not be blue</div>
</div>


</body>

 </html>
4

6 回答 6

4

试试这样：

var $div = $('div.taskName');
$div.filter('[title=yes]').css('color', 'blue');
$div.filter('[title=no]').css('color', 'red');
于 2013-02-05T01:02:04.717 回答
3

这可以在没有 jQuery 或 JavaScript 的情况下完成。纯 CSS：

.taskName[title='yes']
{
    color: blue;
}
.taskName[title='no']
{
    color: red;
}

jsfiddle.net/KSyn3

于 2013-02-05T01:06:48.283 回答
1

.attr只会选择找到的第一个属性。 $("div.taskName")也会影响所有属性。您需要遍历每一个以获取标题并获取要更新的正确 div。不过，您可以立即执行此操作：

$(".test").each(function(){ 
    $(this).find('.taskName').each(function () {
        var title = $(this).attr('title');
        if ('yes' == title) {
            $(this).css('color', 'blue');
        }
        else if ('no' == title) {
            $(this).css('color', 'red');
        }
    });
});

http://jsfiddle.net/ExplosionPIlls/qrRGN/

于 2013-02-05T01:00:15.560 回答
1

为什么不避免选择.test而只是选择.taskname

 $(".taskName").each(function(){ 
    var title = $(this).attr("title");
    if(title =="yes") {
        $(this).css('color','blue');

    }else if(title =="no")  {
        $(this).css('color','red');
    }
});
于 2013-02-05T01:00:52.070 回答
1

这是很好的代码：

$(document).ready(function(){


    $(".taskName").each(function(){ 

        var title = $(this).attr("title");
        if(title =="yes") {
            $(this).css('color','blue');

        }
        else if(title =="no")  {
            $(this).css('color','red');

        }
    });

});

您的错误来自您使用div.taskNamejQuery 选择器这一事实。因此，它针对所有任务名称，而不仅仅是当前任务名称。

这就是您需要使用关键字“this”的原因，这样每次循环运行时，它都会针对不同的元素。

另外，我更改了循环的目标。这样，您就不需要使用该find()功能。这样更快。

于 2013-02-05T01:01:46.917 回答
1 
$('.taskName[title="yes"]').css('color', 'blue');
$('.taskName[title="no"]').css('color', 'red');

还具有在支持它的浏览器上使用 querySelectorAll 的好处。

于 2013-02-05T01:02:48.403 回答