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.taskName、jQuery セレクターとして使用していたという事実から発生しました。その結果、現在の taskName だけでなく、すべてのtaskName がターゲットになります。

そのため、ループが実行されるたびに別の要素を対象とするように、キーワード「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 に答える