javascript - jQuery 根据标题修改元素的样式

Question

用这个 html:

<div class="outer">
    <div class="inner">
        <span class="selection" title="Green"></span>
    </div>
    <div class="inner">
        <span class="selection" title="Yellow"></span>
    </div>
    <div class="inner">
        <span class="selection" title="Red"></span>
    </div>
</div>

以及可以根据需要更改的现有 jQuery:

$(document).ready(function(){
    $('.outer .inner span.selection').each(function(){
        if($(this).attr('title', 'Green')) {
            $(this).parent().css('background-color', 'green');
        }
        if($(this).attr('title', 'Yellow')) {
            $(this).parent().css('background-color', 'yellow');
        }
        if($(this).attr('title', 'Red')) {
            $(this).parent().css('background-color', 'red');
        }
    });
});

本质上，这只会在下拉列表中显示一个元素。我正在寻找更改显示为单一颜色的列表项。其他未选中的列表项将被隐藏。

Answer 1

您将值设置为标题而不是比较，试试这个:

$(document).ready(function() {
  $('.outer .inner span.selection').each(function() {
    var title = $(this).attr('title');
    console.log(title);
    if (title === 'Green') {
      $(this).parent().css('background-color', 'green');
    }
    if (title === 'Yellow') {
      $(this).parent().css('background-color', 'yellow');
    }
    if (title === 'Red') {
      $(this).parent().css('background-color', 'red');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="outer">
  <div class="inner">
    <span class="selection" title="Green">Green</span>
  </div>
  <div class="inner">
    <span class="selection" title="Yellow">Yellow</span>
  </div>
  <div class="inner">
    <span class="selection" title="Red">Red</span>
  </div>
</div>