jquery - jQuery如果每个都有值那么

Question

我将如何编写它，以便如果跨度表示 Newbie，那么它是一种颜色，如果跨度表示 Club Staff，那么它有另一种颜色？

<span class="usertitle">Newbie</span>
<span class="usertitle">Club Staff</span>​

Answer 1

你可以试试:contains选择器：

$(".usertitle:contains('Newbie')")

或each方法：

$(".usertitle").each(function(){
 if ( $.trim($(this).text()) == 'Newbie' ) {
     // $(this).css('color', 'blue')
 }
})

Answer 2

$(document).ready(function() {
    $('.usertitle').each(function() {
        if ($(this).html() == "Newbie") $(this).css("color","blue");
        else if ($(this).html() == "Club Staff") $(this).css("color", "red");
    });
});

http://jsfiddle.net/TgFfm/

Answer 3

如果您真的想从内容中工作：

$(".usertitle").each(function() {
    var $this = $(this);
    var color;
    switch ($.trim($this.text())) {
        case "Newbie":
            color = "green"; // For instance
            break;
        case "Club Staff":
            color = "red";   // For instance
            break;
    }
    if (color) {
        $this.css("color", color);
    }
});

请注意使用$.trim，这里的其他答案奇怪地缺少它，因为您的标记可能在您的跨度中的单词的任一侧包含空格。您在编辑中更新的标记不会。但我仍然会使用$.trim，因为它成本不高，而且让事情变得不那么精致。

（或者，当然，而不是css, 使用addClass这样您就可以通过样式表控制演示文稿。）

但如果可能的话，我真的会尝试找到一种从内容以外的东西来工作的方法。

或者更紧凑和声明性的：

var colors = {
    "Newbie":     "green",
    "Club Staff": "red"
};

$(".usertitle").each(function() {
    var $this = $(this);
    var color = colors[$.trim($this.text())];
    if (color) {
        $this.css("color", color);
    }
});

同样，或者而不是css，使用classes表格而不是colors表格并使用addClass，因此您可以通过样式表控制表示，例如：

var classes = {
    "Newbie":     "newbie",
    "Club Staff": "club-staff"
};

$(".usertitle").each(function() {
    var $this = $(this);
    var cls = classes[$.trim($this.text())];
    if (cls) {
        $this.addClass(cls);
    }
});

Answer 4

我会使用 CSS 类和addClass()

$('.usertitle').each(function(){
  var t = $(this),
      text = $.trim(t.text())
  t.addClass(
    text === 'Newbie' && 'green' ||
    text === 'Club Staff' && 'red' ||
    !text && 'default'
  )
})

Answer 5

js区分大小写：

$('span.usertitle:contains('Newbie')').addClass('newbieColor');
$('span.usertitle:contains('Club Staff')').addClass('clubStaffColor');

演示

js不区分大小写：

$('span.usertitle').html(function() {
    var text = $(this).text().toLowerCase();
    if(text === 'newbie') {
        $(this).addClass('newbieColor');
    } else if(text === 'club staff') {
        $(this).addClass('clubStaffColor');
    }
});

演示

CSS：

.newbieColor {
    color: yellow;
}

.clubStaffColor {
    color: red
}

Answer 6

$('.usertitle').each(function(){
  var text = $.trim($(this).text());
   if(text == "Newbie"){
     // one color
   }
   else if( text == "Club Staff"){
     // another color
   }
});