條件jQuery中

我有列表中的多個元素，我希望做一個有條件通過圖標條件jQuery中

在谷歌控制檯更改這些值：$('li #valorar');

表演：

[ 
    <span id="valorar">4</span> 
, 
    <span id="valorar">1</span> 
, 
    <span id="valorar">5</span> 
]

和我的條件：

var valoraciond = $('li #valorar').html(); 

    if (valoraciond == 0) { 
    $('li #valorar').replaceWith('<span style="color:#fff" class="icon star-empty"></span><span style="color:#fff" class="icon star-empty"></span><span style="color:#fff" class="icon star-empty"></span><span style="color:#fff" class="icon star-empty"></span><span style="color:#fff" class="icon star-empty"></span>'); 
    }else if (valoraciond == 1) { 
    $('li #valorar').replaceWith('<span style="color:#fff" class="icon star"></span><span style="color:#fff" class="icon star-empty"></span><span style="color:#fff" class="icon star-empty"></span><span style="color:#fff" class="icon star-empty"></span><span style="color:#fff" class="icon star-empty"></span>'); 
    }else if (valoraciond == 2) { 
    $('li #valorar').replaceWith('<span style="color:#fff" class="icon star"></span><span style="color:#fff" class="icon star"></span><span style="color:#fff" class="icon star-empty"></span><span style="color:#fff" class="icon star-empty"></span><span style="color:#fff" class="icon star-empty"></span>'); 
    }else if (valoraciond == 3) { 
    $('li #valorar').replaceWith('<span style="color:#fff" class="icon star"></span><span style="color:#fff" class="icon star"></span><span style="color:#fff" class="icon star"></span><span style="color:#fff" class="icon star-empty"></span><span style="color:#fff" class="icon star-empty"></span>'); 
    }else if (valoraciond == 4) { 
    $('li #valorar').replaceWith('<span style="color:#fff" class="icon star"></span><span style="color:#fff" class="icon star"></span><span style="color:#fff" class="icon star"></span><span style="color:#fff" class="icon star"></span><span style="color:#fff" class="icon star-empty"></span>'); 
    }else if (valoraciond == 5) { 
    $('li #valorar').replaceWith('<span style="color:#fff" class="icon star"></span><span style="color:#fff" class="icon star"></span><span style="color:#fff" class="icon star"></span><span style="color:#fff" class="icon star"></span><span style="color:#fff" class="icon star"></span>') 
    }else{ 
    }

爲什麼只採取第一個元素？我如何獲得所有項目？對不起，我的英語

來源

2013-08-27 user2661416

ID必須是唯一的，對不對？ – undefined

是的，ID是獨一無二的。和HTML代碼：

1> 2> 3> 4>

– user2661416

那麼爲什麼當'#valorar'足夠時你的選擇器'li #valorar'？ – 2013-08-27 22:14:39

評論者說得對：問題在於您使用的是身份證，身份證應該是唯一的。如果你的ID不是唯一的，你有無效的HTML，你不能指望jQuery神奇地處理。

順便說一句，你的代碼不是非常乾燥。所有重複的HTML！它可以全部被替換爲以下幾點：

$('li.valorar').each(function(){ 
    var stars = Number($(this).html()); 
    var html = ''; 
    // TODO: error handling if stars is not a number 
    // add stars 
    for(var i=0; i<stars; i++) { 
     html += '<span style="color:#fff" class="icon star"></span>'; 
    } 
    // add empty stars 
    for(; i<5; i++) { 
     html += '<span style="color:#fff" class="icon star-empty"></span>'; 
    } 
    $(this).html(html); 
});

你可以看到它的行動在此的jsfiddle：http://jsfiddle.net/WJ9vp/1/

來源

2013-08-27 22:37:39

回答

相關問題