jquery - Jquery 与常规的 css 属性检查的不同方式

Question

我想知道这两个代码有什么区别

$('.stars li').each(function(i){

  if(this.style.display !== 'none'){
    this.style.display = 'none';
    return false;
  }
});

和这段代码

$('.stars li').each(function(i){

  if($(this).css('display', '')){
    $(this).css('display' = 'none');
    return false;
  }
});

为什么第一个遍历每个 li 元素，而第二个却不停留在第一个元素上？

Answer 1

$(this).css('display', '')

是一个计算值的表达式 - 它的计算结果是 $(this) jQuery 对象，它的 display 也发生了变化。所以条件

if($(this).css('display', '')){

总是会被满足，因为对象是真实的。

使用 $(this).css('display') === 'none' 代替(一个 参数)来检索当前计算的 display 样式。

if ($('div').css('display') === 'none') {
  console.log('Div hidden');
} else {
  console.log('Div not hidden');
}

if ($('span').css('display') === 'none') {
  console.log('Span hidden');
} else {
  console.log('Span not hidden');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div></div>
<span style="display: none"></span>

请记住

this.style.display

检查元素本身的 display 属性，而

$('div').css('display')

检查 computed display 属性。尽管没有元素的 display 属性，该元素仍可能应用了 display(例如，来自像 div { display: none } 这样的 CSS)自己的 style 对象。