Question

所以我有几个班次的＆＃39;发现＆＃39;。在我的jQuery中我有2个变量，正确和不。正确=＆＃39;是＆＃39;和nope =＆＃39;否＆＃39;。当这两个变量中的任何一个都在classes.text（）中时，它们会弹出yes和no。但我无法弄清楚的是如何改变变量的颜色。我想＆＃39;纠正＆＃39;在“是”的情况下使颜色变为绿色。是在跨度，我希望nope有红色的颜色。不是很擅长解释这个，但希望你能得到我想说的话。

代码：

<span class="find"></span>
<span class="find"></span>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
        var correct='Yes';
        var nope='No';
             if($('.find').text() == correct) {
                   $(this).css({color: 'green'});
             }
         $('.find').text(correct);
</script>

Answer 1

我建议您使用CSS类进行着色。通过这种方式，您不会直接使用jQuery应用CSS，从而使您的代码更加模块化，并允许将来更容易的更改。

例如 -

$(document).ready(function() {

  var $find = $('.find')
  $find.each(function() {
    var $this = $(this);
    if ($this.text() === "Yes") {
      $this.addClass('correct');
    } else if ($this.text() === "Nope") {
      $this.addClass('incorrect');
    }
  })

})

.correct {
  color: green;
}
.incorrect {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span class="find">Yes</span>
<span class="find">Nope</span>

Answer 2

此处发生的事情是，您的选择器会在.find中看到多个值，因为您正在选择这两个值。你需要做的是这样的事情：

var correct='Yes';
var nope='No';
$('.find').text(correct);
$('.find').each(function() {
  if($(this).text() == correct) {
    $(this).css({color: 'green'});
  }  
})

另请注意，在检查比较之前必须设置$('.find').text(correct) - 否则它只是一个空字符串。这是你可以玩的小提琴：

Fiddle

Answer 3

$(this)与您使用它的方式没有任何价值。

这是一个有效的例子：

＆＃13;

var Correct = 'Yes';
var nope = 'no';
$('.find').each(function() {
  if ($(this).text() == Correct) {
    $(this).css({
      'color': 'green'
    });
  } else if ($(this).text() == nope) {
    $(this).css({
      'color': 'red'
    });
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="find">Yes</span>
<span class="find">no</span>

＆＃13;

演示：http://codepen.io/Ghodmode/pen/OMprRK

更改jQuery变量的颜色

3 个答案: