javascript - 如何检查具有特定类名的元素是否可见？

Question

我想检查是否有任何具有类名 settingsBox 的元素是可见的。
我创建了这个函数，但它不起作用:

function noOptionsOpen(){
    $(".settingsBox").each(function (){
        if ($(this).is(":visible")) return false;
    })
    return true;
}

我想，如果该类名有任何可见的内容，则内部函数返回 fals，但是在跳出它之后，它仍然总是返回 true，对吧？我只是不知道我该如何解决？

Answer 1

问题是因为您无法从 noOptionsOpen() 返回匿名处理函数中的函数 each() .解决此问题的一种方法是定义一个变量并在返回之前在循环中更新它:

function noOptionsOpen() {
  let optionsOpen = true;
  $(".settingsBox").each(function() {
    if ($(this).is(":visible")) 
      optionsOpen = false;
  })
  return optionsOpen;
}

更好的是使用 :visible在单个选择器中并检查 length属性(property)。这几乎使该功能变得多余，但取决于您的用例:

function noOptionsOpen() {
  return $(".settingsBox:visible").length === 0;
}

// As above in ES6:
let noOptionsOpen = () => $(".settingsBox:visible").length === 0;