Question

我有7个复选框，所有ID都不同。这些ID与div相对应，其中包含数据方法。单击复选框将隐藏除具有相应ID的那个div之外的所有div。

此时此作品！但是当我选择多个复选框时，所有div都会消失。

这是我的javascript：

<script type="text/javascript"> 
jQuery('.filter_methode input').change(function()
    {
        jQuery('.featured-item-container').show();
        jQuery('input').each(function()
            {
            var Checked;
            if(Checked = jQuery(this).attr('checked'))
                {
                    jQuery(".featured-item-container:not([data-methode='" + this.id + "'])").hide();
                };
        }); 
    });
</script>

我想知道如何优化这个脚本，以便它可以监听所有选定的ID。

修改这是HTML：

<div class="filter_methode">
<label><input type="checkbox" name="methode_1"  id="methode_1" />
Methode 1</label>

<label><input type="checkbox" name="methode_2" id="methode_2"  />
Methode 2</label>

<label><input type="checkbox" name="methode_3" id="methode_3"  />
Methode 3</label>

<label><input type="checkbox" name="methode_4" id="methode_4" />
Methode 4</label>

<label><input type="checkbox" name="methode_5" id="methode_5" />
Methode 5</label>


<label><input type="checkbox" name="methode_6" id="methode_6" />
Methode 6</label>


<label><input type="checkbox" name="methode_7" id="methode_7" />
Methode 7</label>

<label><input type="checkbox" name="methode_8" id="methode_8" />
Methode 8</label>

<div class="featured-container col-md-12">
    <div class="row">
        <div class="featured-item-container" data-methode="methode_1">
            Some text and image in here
        </div>
        <div class="featured-item-container" data-methode="methode_1">
            Some text and image in here
        </div>
        <div class="featured-item-container" data-methode="methode_1">
            Some text and image in here
        </div>
        <div class="featured-item-container" data-methode="methode_3">
            Some text and image in here
        </div>
        <div class="featured-item-container" data-methode="methode_7">
            Some text and image in here
        </div>
        <div class="featured-item-container" data-methode="methode_8">
            Some text and image in here
        </div>
        <div class="featured-item-container" data-methode="methode_2">
            Some text and image in here
        </div>
        <div class="featured-item-container" data-methode="methode_4">
            Some text and image in here
        </div>
        <div class="featured-item-container" data-methode="methode_8">
            Some text and image in here
        </div>
        <div class="featured-item-container" data-methode="methode_5">
            Some text and image in here
        </div>
        <div class="featured-item-container" data-methode="methode_6">
            Some text and image in here
        </div>
        <div class="featured-item-container" data-methode="methode_5">
            Some text and image in here
        </div>
        <div class="featured-item-container" data-methode="methode_1">
            Some text and image in here
        </div>
        <div class="featured-item-container" data-methode="methode_2">
            Some text and image in here
        </div>
    </div>
</div>

所以，当我点击带有ID methode_1的复选框时，它确实只显示了带有data-methode =“methode_1”的div，但是当我也点击复选框methode_2时，所有div都会消失，而不是显示带有methode_1和methode_2的div

Answer 1

现在我的代码就是解决方案：

$('#submit').click ->

没有＆＃34;这个＆＃34;在匿名函数中。您可以使用第二个参数访问该对象。

见这里：https://jsfiddle.net/92u6u72L/3/

jQuery隐藏复选框多个值

1 个答案: