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/

取消选中其中一个类别复选框（验证） - ＆gt;所有“Auth”Div都会消失，这是正确的
取消选中日志级别Normal - ＆gt;所有左“信息”Div将消失，这是正确的到目前为止
再次检查Auth，所有Auth div将再次出现（包括那些也包含info类的div）。这是不正确的，因为日志级别应该具有更高的优先级来隐藏可见性。

我的想法是解决这个问题：

我认为我可以使用!important CSS属性来解决这个问题，直到我看到show()和hide()操纵dom元素本身而不是类。现在，我想不到解决这个问题的正确方法。

Answer 1

您可以使用:not(.info, .debug)块中的else过滤器，如下所示。

        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/

＆＃13;

    /* 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");
    });

＆＃13;

<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>

＆＃13;

Answer 2

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

基本上，你用父div包装你想要的一切。 E.g。

<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 3

修改条件，以便始终在loglevel或.hide()之前检查.show()复选框的状态。这将使那些最重要的条件。像这样......

    /* 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);
    }
});

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

3 个答案: