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

我有多个div，每个div有一个或多个类。这些类可以是

info

，

debug

，

init

或

auth

。过滤器应该隐藏或显示这些不同的类

挑战：

Info

和

Debug

的优先级高于

Init

或

Auth

。因此，如果我们有以下div:

Info Build Text

则无论

Build

筛选器如何显示，如果

Info

筛选器处于活动状态，则应该将其隐藏

在JSFIDLE中演示的问题：

取消选中其中一个类别复选框（Auth）->所有“Auth”div都将消失，这是正确的

取消选中日志级别

Normal

->所有左侧的“Info”div将消失，到目前为止这是正确的

再次选中Auth，所有Auth div将再次出现（包括那些也包含info类的div）。这是不正确的，因为日志级别应该具有隐藏可见性的更高优先级

我解决这个问题的想法：

---

我想我可以用

解决这个问题！重要的

CSS属性，直到我看到

show（）

和

hide（）

操作dom元素本身而不是类。我现在想不出解决这个问题的好办法。

修改您的条件，以便始终检查

.hide（）

或

.show（）

之前的

loglevel

复选框的状态。这将使这些成为最重要的条件。像这样的

    /* If any checkbox status has been changed */
$("#sidebar").children("input").on("change", function() {
    var className = $(this).attr("class");

    // If we want to toggle the loglevel visibility we don't need to take care of other filtered values as this has priority
    if(className == "loglevel") {
        if(this.checked)
            $("." + this.name).show(400);
        else
            $("." + this.name).hide(400);
    }
    else {
        if(this.checked && $(".loglevel[name='debug']").is("checked"))
            $("." + this.name).show(400);
        else
            $("." + this.name).hide(400);
    }
});

---

修改条件，以便始终在

.hide（）

或

.show（）

之前检查

loglevel

复选框的状态。这将使这些成为最重要的条件。像这样的

    /* If any checkbox status has been changed */
$("#sidebar").children("input").on("change", function() {
    var className = $(this).attr("class");

    // If we want to toggle the loglevel visibility we don't need to take care of other filtered values as this has priority
    if(className == "loglevel") {
        if(this.checked)
            $("." + this.name).show(400);
        else
            $("." + this.name).hide(400);
    }
    else {
        if(this.checked && $(".loglevel[name='debug']").is("checked"))
            $("." + this.name).show(400);
        else
            $("." + this.name).hide(400);
    }
});

您可以在

else

块中使用

：not（.info，.debug）

过滤器，如下所示

        else {
            if(this.checked)
                $("." + this.name + ':not(.info, .debug)').show(400);
            else
                $("." + this.name + ':not(.info, .debug)').hide(400);
        }

你可以在下面检查相同的内容，我也在下面的fiddle链接中更新了相同的内容

/*如果任何复选框状态已更改*/
$（“#边栏”）.children（“输入”）.on（“更改”，函数（）{
var className=$（this.attr（“类”）；
//如果我们想切换日志级别可见性，我们不需要考虑其他过滤值，因为这具有优先级
if（className==“loglevel”）{
如果（选中此项）
$（“+this.name）.show（400）；
其他的
$（“+this.name）.hide（400）；
}
否则{
如果（选中此项）
$（“+this.name+”：不是（.info.debug）”.show（400）；
其他的
$（“+this.name+”：不是（.info.debug）”.hide（400）；
}
//var isTargetHidden=$（“+this.name）.is（“：visible”）；
});

信息构建文本
信息初始化文本
信息初始化2文本
信息初始化3文本
信息验证文本
调试验证文本
调试2验证文本
信息验证文本



日志级别
正常的

详细/调试
类别
初始化过程

认证

您可以在
else
块中使用
：not（.info，.debug）
过滤器，如下所示

        else {
            if(this.checked)
                $("." + this.name + ':not(.info, .debug)').show(400);
            else
                $("." + this.name + ':not(.info, .debug)').hide(400);
        }

你可以在下面检查相同的内容，我也在下面的fiddle链接中更新了相同的内容



/*如果任何复选框状态已更改*/
$（“#边栏”）.children（“输入”）.on（“更改”，函数（）{
var className=$（this.attr（“类”）；
//如果我们想切换日志级别可见性，我们不需要考虑其他过滤值，因为这具有优先级
if（className==“loglevel”）{
如果（选中此项）
$（“+this.name）.show（400）；
其他的
$（“+this.name）.hide（400）；
}
否则{
如果（选中此项）
$（“+this.name+”：不是（.info.debug）”.show（400）；
其他的
$（“+this.name+”：不是（.info.debug）”.hide（400）；
}
//var isTargetHidden=$（“+this.name）.is（“：visible”）；
});

信息构建文本
信息初始化文本
信息初始化2文本
信息初始化3文本
信息验证文本
调试验证文本
调试2验证文本
信息验证文本



日志级别
正常的

详细/调试
类别
初始化过程

认证

我喜欢通过使用CSS类以更简单的术语介绍这些情况。以JSFiddle为例

本质上，您可以使用父级
div
来包装所有需要的内容。例如

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

然后你的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转换。
我喜欢使用CSS类以更简单的方式介绍这些情况。以JSFiddle为例

本质上，您可以使用父级
div
来包装所有需要的内容。例如

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

然后你的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转换。
！重要信息
甚至会覆盖内联样式（至少在我们使用的主要浏览器上）@gonecode，除非内联也有重要信息。您可以使用
：not（.info，.debug）
过滤器，如我所述below@YanMayatskiy：正确但不常见。
！重要信息
甚至会覆盖内联样式（至少在我们使用的主要浏览器上）@gonecode，除非内联也有重要信息。您可以使用
：not（.info，.debug）
过滤器，如我所述below@YanMayatskiy：true但不常见。从本质上讲，您可以使用
.filter（）
并在回调中同时包含两个
。选中的
状态。在本机上，您可以使用
.filter（）
并同时包含两个
。选中的
状态