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>

Answer 2

嗨，我不完全确定你对你的问题的意思。但是你是否试图将各个颜色作为部分的背景，而不仅仅是它检查的最后颜色？

您需要将值设置为等于标题而不是比较它。我在这个代码笔中修复了它：http://codepen.io/anon/pen/eJeKgZ

$(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');
        }
    });
});

JQuery修改元素的标题样式

2 个答案: