javascript - 显示/隐藏具有优先级的 div

Question

我有多个 div，每个 div 有一个或多个类。这些类可以是 info , debug , init或 auth .过滤器应该隐藏或显示这些不同的类。

挑战:

Info和 Debug优先级高于 Init或 Auth .因此，如果我们有以下 div:<div class="info build">Info Build Text</div>如果 info 应该隐藏它过滤器处于事件状态，无论 build 是什么过滤器说。

JSfiddle 中演示的问题: https://jsfiddle.net/7od81x0t/

1. 取消选中类别复选框之一 (Auth) -> 所有“Auth”Div 都将消失，这是正确的
2. 取消选中日志级别 Normal -> 所有剩余的“信息”div 将消失，到目前为止是正确的
3. 再次检查 Auth，所有 Auth div 将再次出现(包括那些也包含 info 类的 div)。这是不正确的，因为日志级别应该具有更高的隐藏可见性的优先级。

我的解决方案:

我想我可以通过使用 !important 来解决这个问题CSS 属性，直到我看到 show()和 hide()操作 dom 元素本身而不是类。目前我还没有想到解决这个问题的合适方法。

Answer 1

我喜欢使用 CSS 类以更简单的术语来涵盖这些情况。取this以 JSFiddle 为例。

本质上，您用父 div 包装您想要的所有内容。例如

<div id="parent">
  <div class="info build">Info Build Text</div>
  <div class="info init">
    Info Init Text
  </div>
  <!-- ... -->
</div>

然后设置一些 CSS 类，你可以应用它来隐藏你想要的东西:

.hide-auth .auth,
.hide-init .init,
.hide-info .info,
.hide-debug .debug,
.hide-build .build {
  display:none;
}

然后你的 JavaScript 就变成了切换类:

/* If any checkbox status has been changed */
$("#sidebar").children("input").on("change", function() {
    var name = $(this).attr("name");
    $('#parent').toggleClass('hide-' + name, !this.checked);
    //var isTargetHidden = $("." + this.name).is(":visible");
});

要获得幻灯片效果，您可以在 max-height 属性上使用 CSS transitions。