显示/隐藏优先级的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. 检查验证一遍，所有验证的div会再次出现（包括那些还含有的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转换。

Answer 2

修改您的条件，以便始终在.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); 
    } 
}); 

Answer 3

您可以在下面的else块使用:not(.info, .debug)过滤器。

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

您可以检查下同也已经更新了同样的在下面拨弄链接，

https://jsfiddle.net/balasuar/7od81x0t/1/

/* 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) 
 
       $("." + this.name + ':not(.info, .debug)').show(400); 
 
      else 
 
       $("." + this.name + ':not(.info, .debug)').hide(400); 
 
     } 
 

 
     //var isTargetHidden = $("." + this.name).is(":visible"); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="info build">Info Build Text</div> 
 
<div class="info init"> 
 
    Info Init Text 
 
</div> 
 
<div class="info init"> 
 
    Info Init2 Text 
 
</div> 
 
<div class="info init"> 
 
    Info Init3 Text 
 
</div> 
 
<div class="info auth"> 
 
    Info Auth Text 
 
</div> 
 
<div class="debug auth"> 
 
    Debug Auth Text 
 
</div> 
 
<div class="debug auth"> 
 
    Debug2 Auth Text 
 
</div> 
 
<div class="info auth"> 
 
    Info Auth Text 
 
</div> 
 
<br><br> 
 
<div id="sidebar"> 
 
    <div> 
 
    <strong class="title2">Log Level</strong> 
 
    </div> 
 
    <input type="checkbox" class="loglevel" name="info" checked="checked"> 
 
    <label for="info">Normal</label></br> 
 
    <input type="checkbox" class="loglevel" name="debug" checked="checked"> 
 
    <label for="debug">Verbose/Debug</label> 
 
    <div> 
 
    <strong class="title2">Category</strong> 
 
    </div> 
 
    <input type="checkbox" name="init" checked="checked"> 
 
    <label for="init">Initializing Procedure</label></br> 
 
    <input type="checkbox" name="auth" checked="checked"> 
 
    <label for="auth">Auth</label></br> 
 
</div>