javascript - 检查每个元素并根据父元素更改它 (JavaScript/jQuery)

Question

我有一个案例，我需要根据具有 .box 类的最近父元素的背景动态更改列表项的背景。如果该父项也有 .gray 类，则将此列表中 span 元素的当前背景替换为深色背景，否则替换为白色。我尝试了这种方法(下面的代码)，它返回了正确数量的真值和假值，但是 if/then 部分不起作用，它只是替换了所有元素的背景颜色，而不仅仅是在一个列表中。

$(document).ready(function() {
	$('.box-list li span').each(function(){ 
		var is_gray = $(this).closest('.box').hasClass('gray'); 
			console.log (is_gray);
		
		if (is_gray = true) {
			$('.box-list li span').css('background', '#999');
		}
		else {
			$('.box-list li span').css('background', '#fff');
		}
	});
});

.box-list {
    list-style: none;
    padding: 0;
    overflow-x: hidden;
	width: 100%; 
}
.box-list li:before {
    float: left;
    width: 0;
    white-space: nowrap;
    content:"· · · · · · · · · · · · · · · · · · · · ""· · · · · · · · · · · · · · · · · · · · ""· · · · · · · · · · · · · · · · · · · · ""· · · · · · · · · · · · · · · · · · · · ""· · · · · · · · · · · · · · · · · · · · "
}
.box-list li span:nth-child(2) {
    float: right;
}
.box-list li {
	margin: 0 0 10px 0;
}
.box-list li:last-child {
	margin: 0 !important;
}
.box-list li span {
	padding: 0 10px;
}
.box {	
	padding-right: 3rem;
	padding-left: 3rem;
	padding-top: 1.5rem !important; 
	padding-bottom: 3rem !important;
}
.box.gray {
	background: #efefef !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "box gray">
  <div>
    <ul class="box-list">
      <li>
        <span>
          List item
        </span>
        <span>
          1
        </span>
      </li>
      <li>
        <span>
          Another list item
        </span>
        <span>
          2
        </span>
      </li>
      <li>
        <span>
          And another one
        </span>
        <span>
          3
        </span>
      </li>
      <li>
        <span>
          And one more
        </span>
        <span>
          4
        </span>
      </li>
      <li>
        <span>
          Secont to last list item
        </span>
        <span>
          5
        </span>
      </li>
      <li>
        <span>
          The last list item
        </span>
        <span>
          6
        </span>
      </li>
    </ul>
  </div>
</div>
 
<div class = "box">
  <div>
    <ul class="box-list">
      <li>
        <span>
          List item
        </span>
        <span>
          1
        </span>
      </li>
      <li>
        <span>
          Another list item
        </span>
        <span>
          2
        </span>
      </li>
      <li>
        <span>
          And another one
        </span>
        <span>
          3
        </span>
      </li>
      <li>
        <span>
          And one more
        </span>
        <span>
          4
        </span>
      </li>
      <li>
        <span>
          Secont to last list item
        </span>
        <span>
          5
        </span>
      </li>
      <li>
        <span>
          The last list item
        </span>
        <span>
          6
        </span>
      </li>
    </ul>
  </div>
</div>

Answer 1

我在这里没有得到 jQuery 的目的...为什么不使用纯 CSS？有点像

.box .box-list li span {
  background: white;
}
.box.gray .box-list li span {
  background: gray;
}

这会起作用，除非您想动态获取父对象的背景颜色。在这种情况下，以下答案也不正确。

---

如果您的问题是在某些特定情况下设置背景(因此您不希望总是出现这种行为)，我会尝试仅将 jQuery 用于添加/删除类，即

//click or whatever you expect
$('#button').click( flagBox );
function flagBox(){
  $('#theBox').addClass('active');
}

和 CSS

.box.active .box-list li span {
  background: white;
}
.box.active.gray .box-list li span {
  background: gray;
}