Question

当我的jQuery运行时，我无法定位我需要显示/隐藏的div。

我需要隐藏<div class="grid-cell>，否则一旦div被隐藏，flexbox将无法正确显示。

我无法点击正确的div并且在更改我的代码后现在无法正常工作。

<input type="checkbox" class="checkbox" name="High" data-category-type="high">High
<input type="checkbox" class="checkbox" name="low" data-category-type="low" > Low
      <input type="checkbox" class="checkbox" name="low" data-category-name="bread" > bread

<div class="wrap">
<div class="grid grid--flexcells grid--gutters grid--1of2">        
    <div class="grid-cell">
        <div class="box">
            <div id="categories" data-category-type="high" data-category-name="low">
                <a href="#">
                <div class="image"><img src="#"></div>
                </a>
            </div>
        </div>
    </div>
     <div class="grid-cell">
        <div class="box">
             <div id="Categories" data-category-type="high" data-category-name="bread">
                <a href="#">
                <div class="image"><img src="#"></div>
                </a>
            </div>
        </div>
    </div>
            <div class="grid-cell">
        <div class="box">
            <div id="Categories" data-category-type="high" data-category-name="low">
                <a href="#">
                <div class="image"><img src="#"></div>
                </a>
            </div>
        </div>
    </div>
                     <div class="grid-cell">
        <div class="box">
            <div id="Categories" data-category-type="low" data-category-name="bread">
                <a href="#">
                <div class="image"><img src="#"></div>
                </a>
            </div>
        </div>
    </div>
</div>

.wrap{width:80%; height:200px; border:1px solid #ccc;}
.grid { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.grid--1of2 > .grid-cell { flex: 0 0 50%; }
.image{width:100%; height:100px; border:1px solid #ff00ff}

 $('.checkbox ').on('click', function (e) {


var $this = $(this),
    $links = $('.checkbox');

if ($this.hasClass('selected')) {
    $this.removeClass('selected');
} else {
    $this.addClass('selected');
}

 var selectedDivs = $('.box > categories > a > div').hide();
 var anySelectedCheckbox = false;
 $.each($links, function (k, v) {

$this = $(v);

if ($this.hasClass('selected')) {
    anySelectedCheckbox = true;
    var cat = $this.data('categoryType');
    var nam = $this.data('categoryName');
    selectedDivs = selectedDivs.filter('[data-category-type="'+cat+'"], [data-category-name="'+nam+'"]');
}

});
selectedDivs.show();

if(!anySelectedCheckbox) {
$('.box > div').show();

}


});

Answer 1

正如评论所暗示的那样，你想要做的事情并不是很清楚，但我认为我得到了它。我没有对您的HTML或CSS进行任何更改。刚刚修改了一下你的JavaScript。

lives = 10
kills = 20
score = 30
...

http://jsfiddle.net/yzyyqqey/

按复选框显示/隐藏目标divs jquery

1 个答案: