5

html 

<ul class="logoUl">
    <li class="orange"></li>
    <li class="blue"></li>
    <li class="green"></li>
    <li class="pink"></li>
</ul>

脚本 

if (selectedCategory == 'currentAll') {

    var strString = "orange,blue,green,pink";
    var strArray = strString.split(',');

    $.each(strArray, function (index, value) {
        $("ul.logoUl > li").addClass(value)
    });
}

ul.logoUL には 4 つの li があり、イメージをこれに似せていますここに画像の説明を入力 。ロゴの背景色が灰色にリセットされる場合があります。そのようです

現在、私のコードは色をリセットしませんここに画像の説明を入力

質問：

liクラスを介して元の配色を取得することを期待して、一度に1つのクラスを追加しながら、一度に1つずつ反復するにはどうすればよいですか?

4

2 に答える 2

6 
var strString = "orange,blue,green,pink",
    strArray = strString.split(',');

$("ul.logoUl > li").each(function (index, value) {
    $(this).addClass(strArray[index]);
});

デモ

ループなし:

var strString = "orange,blue,green,pink",
    strArray = strString.split(',');

$("ul.logoUl > li").addClass(function (index) {
    return strArray[index];
});

デモ

ノート

似たような配色にするためclassにそれぞれを変更しているので、元の配色に戻したい場合は、次のように、以前に割り当てられた色を最初に削除してから、元の配色を再度割り当てることをお勧めします。libackgroundclassclass

var strString = "orange,blue,green,pink",
    strArray = strString.split(',');

$("ul.logoUl > li")
    .removeClass() // first remove previous class
    .addClass(function (index) { // then add new class
        return strArray[index];
    });

デモ

于 2012-06-22T05:40:35.500 に答える
2

使用できます

if (selectedCategory == 'currentAll') {

    var strString = "orange,blue,green,pink";
    var strArray = strString.split(',');

    $.each(strArray, function (index, value) {
        $("ul.logoUl > li").eq(index).addClass(value)
    });
}

デモ: http://jsfiddle.net/joycse06/j4qqS/

于 2012-06-22T05:39:07.287 に答える