0

我在列表中有多个元素，我想有条件通过图标更改这些值

在谷歌控制台中：$('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 神奇地处理它。

顺便说一句，您的代码不是很干燥。所有重复的 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 回答