0

リストに複数の要素があり、そのような値をアイコンで変更する条件を作成したい

Google コンソールで:$('li #valorar');

ショー:

[
  <span id=​"valorar">​4​&lt;/span>​
 , 
  <span id=​"valorar">​1​&lt;/span>​
 , 
  <span id=​"valorar">​5​&lt;/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{
    }

なぜ最初の要素だけを取るのですか?どうすればすべてのアイテムを取得できますか? 私の英語でごめんなさい

4

1 に答える 1

0

コメンターはそれを正しく理解しています: 問題は ID を使用していることであり、ID は一意であると想定されています。ID が一意でない場合は、HTML が無効であり、jQuery がそれを魔法のように処理することは期待できません。

余談ですが、コードはあまり DRY ではありません。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-27T22:37:39.127 に答える