Question

试图让它根据标题中的内容重新设置每个元素到目前为止，它只是根据第一个改变它而忽略了其他的。当我使用“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>

Answer 1

试试这样：

var $div = $('div.taskName');
$div.filter('[title=yes]').css('color', 'blue');
$div.filter('[title=no]').css('color', 'red');

Answer 2

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

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

jsfiddle.net/KSyn3

Answer 3

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

Answer 4

为什么不避免选择.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');
    }
});

Answer 5

这是好的代码：

$(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.taskName作为jQuery选择器的事实。因此，它定位所有任务名称，而不仅仅是当前的名称。

这就是为什么你需要使用关键字“this”，这样，每次循环运行时，它都会以不同的元素为目标。

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

Answer 6

$('.taskName[title="yes"]').css('color', 'blue');
$('.taskName[title="no"]').css('color', 'red');

还可以在支持它的浏览器上使用querySelectorAll。

使用属性'title'更改css项

6 个答案: