0

假设我有 10 个具有类.hide的 div 元素，它们在该 div 内容中具有不同的不同类别名称（例如，食品、旅行、体育......）。

<div id="Categories">
    <div class="hide">Foods are Fruits, Chicken, Rice, Pizza...</div>
    <div class="hide">My Travelling places are Bangalore, Goa, Kolkata..</div>
    <div class="hide">Sports :Cricket, Basket ball, Tennis, ..</div>
          .
          .
</div>

假设我有 3 个锚标签，

<a href="#">Food</a>
<a href="#">Travelling</a>
<a href="#">Sports</a>
         .
         .

所以，我想用受尊重的类别过滤这些 div.hide 元素。

我用复选框做了同样的过滤，

<script>
    var $filters = $("input:checkbox[name='fli']"); 

var $categoryContent = $('#Categories .hide');
var $errorMessage = $('#errorMessage');
$filters.click(function() {
    // if any of the checkboxes for Category or team are checked, you want to show div's containing their value, and you want to hide all the rest.
    $categoryContent.hide();
     var $selectedFilters = $filters.filter(':checked');
    if ($selectedFilters.length > 0) {
        $errorMessage.hide();
        $selectedFilters.each(function (i, el) {
            $categoryContent.filter(':contains(' + el.value + ')').show();
        });
    } else {
        $errorMessage.show();
    }

});
</script>

但我也想要这个

我怎样才能做到这一点，请任何人帮助我。

谢谢

4

1 回答 1

0

可以这样做：

演示

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

HTML：

<div class="nav">
<a href="#" data-category-type="Food">Food</a>

<a href="#" data-category-type="Travelling">Travelling</a>

<a href="#" data-category-type="Sports">Sports</a>

</div>
<div id="Categories">
    <div class="hide" data-category-type="Food">Foods are Fruits, Chicken, Rice, Pizza...</div>
    <div class="hide" data-category-type="Travelling">My Travelling places are Bangalore, Goa, Kolkata..</div>
    <div class="hide" data-category-type="Sports">Sports :Cricket, Basket ball, Tennis, ..</div>
    <div class="hide" data-category-type="Food">Foods are Fruits, Chicken, Rice, Pizza...</div>
</div>
于 2013-07-06T10:31:51.110 回答