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

Question

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

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

我猜，如果该类名有任何可见内容，内部函数将返回 fals，但跳出它后，它仍然总是返回 true，对吧？我只是不知道如何解决这个问题？

Answer 1

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

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

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

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

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