Question

这里我有一个过滤div元素的脚本。

HTML

<div class="nav">
<a href="#" data-category-type="4380" data-category-name="jet">4380</a>

<a href="#" data-category-type="4620" data-category-name="air">4620</a>

<a href="#" data-category-type="5000" data-category-name="india">5000</a>

</div>
<div id="Categories">
    <div class="hide" data-category-type="4380" data-category-name="jet">4380.</div>
    <div class="hide" data-category-type="4620" data-category-name="air">4620.</div>
    <div class="hide" data-category-type="5000" data-category-name="india">5000.</div>
    <div class="hide" data-category-type="4380" data-category-name="jet">4380.</div>
</div>

JQUERY

$('.nav a').on('click', function (e) {
    e.preventDefault();
    var cat = $(this).data('categoryType');
    var nam = $(this).data('categoryName');
    $('#Categories > div').hide();
    $('#Categories > div[data-category-type="'+cat+'"]').show();

});

这里，我只检查一个条件（数据类别类型），

但在这里，我想检查两个条件

数据类型
数据类别的名称

我怎样才能实现这一点，任何人都可以帮助我。

修改在这里，我还有一个问题，如何显示所有div元素（如果我点击）

<a href="">Show all</a>

谢谢

Answer 1

你可以追加一个像

这样的条件

$('.nav a').on('click', function (e) {
    e.preventDefault();
    var cat = $(this).data('categoryType');
    var nam = $(this).data('categoryName');
    $('#Categories > div').hide();
    $('#Categories > div[data-category-type="'+cat+'"][data-category-name="'+nam+'"]').show();

});

演示：Fiddle

同时检查

var divs = $('#Categories > div');
$('.nav a').on('click', function (e) {
    e.preventDefault();
    var $this = $(this);
    var cat = $this.data('categoryType');
    var nam = $this.data('categoryName');
    divs.filter(':visible').hide();
    divs.filter('[data-category-type="'+cat+'"][data-category-name="'+nam+'"]').show();
});

演示：Fiddle

基于click事件的Jquery div过滤

1 个答案: