顯示/隱藏優先級的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>