javascript - 根据子类/内容更改 DIV 的颜色

Question

我想制作 <span>人 1 的背景颜色与人 2 的颜色不同。

这个方法我试过了，没用:

$('span.Message').each(function() {

  if ($(this).find('span.person1').length > 0) {
    $("span.person1").parent().css("background", "yellow");
  } else {
    $("span.person1").parent().css("background", "red");
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="Message">
    <img alt="" src="images/person1.png">
    <span class="person1">Person 1 Name</span>: Hi, how are you?
</span>

<span class="Message">
    <img alt="" src="images/person2.png">
    <span class="person2">Person 2 Name</span>: Good, how are you?
</span>

Answer 1

您应该在 if() { } else { } 中使用 $(this) 而不是 span.person1，否则您'总是选择相同的元素，无论其内容如何。

您可以简单地在 each() 函数中设置 $(this).css()，并使用三元运算符来选择颜色，具体取决于find()函数的长度如下:

$('span.Message').each(function() {
  var bg = ($(this).find('span.person1').length) ? 'yellow' : 'red';
  $(this).css('background', bg);
});

span.Message {
display: block;
height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class="Message">
  <img alt="" src="images/person1.png">
  <span class="person1">Person 1 Name</span>: Hi, how are you?
</span>

<span class="Message">
  <img alt="" src="images/person2.png">
  <span class="person2">Person 2 Name</span>: Good, how are you?
</span>