CODEWITHSUNDEEP
jquery
user123456789
user123456789

Reputation: 566

Jquery div filtering based on click event

Here i'm having a script that which filters the div elements.

Working Demo here

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();

});

here, i'm checking only one condition (data-category-type),

But here, i want to check the both conditions

  1. data-category-type
  2. data-category-name

How can i achieve this , can anyone help me out please.

EDIT Here i have one more question, how can i show all div elements (if i click on)

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

Thank you

Upvotes: 1

Views: 5837

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388326

You can append one more condition like

$('.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();

});

Demo: Fiddle

Also check

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();
});

Demo: Fiddle

Upvotes: 3

Related Questions