Question

我试图建立一个简单的互动，但事实证明它有点棘手，我无法做到。

我想使用一些复选框来根据不同的类隐藏和显示不同的div。 div中的类是动态的，框的结构必须是这样的。

有了一些帮助，我得到了一个有用的想法，但它有一些问题：

最后

https://jsfiddle.net/lanweil/bq8xLxrm/ 代码

如果选中所有复选框，并且您想要取消选中RED，例如，它会隐藏包含RED元素（红色等级）的框，但它应隐藏包含仅 RED的框。仍然可以看到带有绿色和红色的盒子。我怎么能这样做？
作为奖励，如果没有选中复选框，我希望所有方框都可见。我发现这看起来非常接近，但我不能让它在我的情况下工作。 http://jsfiddle.net/chriscoyier/BPhZe/76/

以下是基本概念的代码，HTML：

<ul>
    <label>
        <li>
            <input type="checkbox" name="tag_checkbox" rel=".box.blue" value="blue" class="tag_checkbox blue" /> <span>BLUE</span>

        </li>
    </label>
    <label>
        <li>
            <input type="checkbox" name="tag_checkbox" rel=".box.red" value="red" class="tag_checkbox red"> <span>RED</span>

        </li>
    </label>
    <label>
        <li>
            <input type="checkbox" name="tag_checkbox" rel=".box.green" value="green" class="tag_checkbox green"> <span>GREEN</span>

        </li>
    </label>
    <label>
        <li>
            <input type="checkbox" name="tag_checkbox" rel=".box.gray" value="gray" class="tag_checkbox gray"> <span>GRAY</span>

        </li>
    </label>
</ul>
<div class="box_container">
    <div class="box blue red green gray"> <span class="blue">BLUE</span><span class="red">RED</span><span class="green">RED</span><span class="gray">GRAY</span>

    </div>
    <div class="box blue green"><span class="blue">BLUE</span><span class="green">GREEN</span>

    </div>
    <div class="box blue"><span class="blue">BLUE</span>

    </div>
    <div class="box red gray"><span class="red">RED</span><span class="gray">GRAY</span>

    </div>
    <div class="box gray"><span class="gray">GRAY</span>

    </div>
    <div class="box blue green gray"><span class="blue">BLUE</span><span class="green">GREEN</span>

    </div>
    <div class="box green gray"><span class="green">GREEN</span><span class="gray">GRAY</span>

    </div>
    <div class="box red"><span class="red">RED</span>

    </div>
</div>

CSS

.box {
    /* display: block; */
    display: none;
    height: 100px;
    width: 200px;
    float: left;
    margin: 10px;
    border: 1px solid black;
}

span.blue, span.red, span.green, span.gray {
    padding: 10px;
    float: left;
}


span.blue {
    background: lightblue;
}
span.red {
    background: red;
}
span.green {
    background: lightgreen;
}
span.gray {
    background: lightgray;
}

JS

$(document).ready(function () {
    $("input:checkbox").change(function (value) {
        var $this = $(this);
        var box = $($this.attr('rel'))

        box.toggle(this.checked);
    });
});

Answer 1

以下是您的工作方式：

$(document).ready(function () {
    $("input:checkbox").change(function (value) {
        if($(this).is(':checked')) {
            $($(this).attr("rel")).show();
        } else {
            $($(this).attr("rel")).hide();

            $("input:checked").each(function() {
                $($(this).attr("rel")).show();
            });
        }
    });
});

当选中复选框时，我显示所有具有颜色类的框。取消选中之后，首先取消选中具有该颜色的框，然后重新显示所有具有其他选中输入颜色的框。这只是1号请求。

工作jsfiddle：

https://jsfiddle.net/bq8xLxrm/24/

隐藏并显示具有多个公共类的div

1 个答案: