CODEWITHSUNDEEP
javascripthtmljquerycssjquery-events
dsan
dsan

Reputation: 1588

Is there a way to check an element's attribute when using Event Delegation?

Using Event Delegation, is there a way to check the element that was fired if it has a particular attribute or specifically a class or an ID?

<ul>
    <li><button>Make the first paragraph appear</button></li>
    <li><button>Make the second paragraph appear</button></li>
    <li><button>Make the third paragraph appear</button></li>
</ul>

<div>
    <p class="first">First paragraph</p>
    <p class="second">Second paragraph</p>
    <p class="third">Third paragraph</p>
</div>

Let's say all the paragraphs are hidden initially and clicking on the first button, the first paragraph appears and clicking on the second button, the first paragraph is hidden and the second paragraph is displayed and when the third button is clicked, the second paragraph is hidden while keeping the first paragraph hidden as well.

My solution so far was to make a event handler for each specific button and hide the other two paragraphs while only showing one. It works but if the number of elements increased, the event handlers needed for each one would increase too. Is there a better way to do this?

Upvotes: 0

Views: 42

Answers (3)

unloco
unloco

Reputation: 7320

I would rather use <a> instead of buttons and then use the href attribute for the identifying, and use id's for paragraphs

<ul class="link-list">
    <li><a href="#first">Make the first paragraph appear</a></li>
    <li><a href="#second">Make the second paragraph appear</a></li>
    <li><a href="#third">Make the third paragraph appear</a></li>
</ul>

<div>
    <p id="first">First paragraph</p>
    <p id="second">Second paragraph</p>
    <p id="third">Third paragraph</p>
</div>

$('.link-list').on('click','li > a',function(){
    //id would be something like #first
    var id = $(this).attr('href');
    //we use it as a selector (you can also use $('div.classname').find(id);
    var $paragraph = $(id);
    // we show our desired paragraph and hide its siblings
    $paragraph.show().siblings().hide();
    // make sure the browser does not follow the link/anchor
    return false;
});

Fiddler

Upvotes: 0

Felix
Felix

Reputation: 38112

If the index of buttons and paragraphs are the same then you can make use of .index():

$('button').click(function() {
    var idx = $(this).index('ul li button');
    $('div p').eq(idx).show().siblings('p').hide();    
});

Fiddle Demo

or you can use data-* attribute if the index are different:

<ul>
    <li><button data-parapgraph="first">Make the first paragraph appear</button></li>
    <li><button data-parapgraph="second">Make the second paragraph appear</button></li>
    <li><button data-parapgraph="third">Make the third paragraph appear</button></li>
</ul>

<div>
    <p class="first">First paragraph</p>
    <p class="second">Second paragraph</p>
    <p class="third">Third paragraph</p>
</div>

then apply .data() to retrieve the data-* attribute:

$('button').click(function() {
    var parapgraph = $(this).data('parapgraph');
    $('p.' + parapgraph).show().siblings('p').hide();    
});

Fiddle Demo

Upvotes: 2

Arun P Johny
Arun P Johny

Reputation: 388366

I think if you can make sure the position of the button and the p to be displayed are the same then you can use an index based solution like

jQuery(function ($) {
    var $ts = $('div > p');
    $('ul button').click(function (e) {
        $ts.hide().eq($(this).parent().index()).show()
    })
})

Demo: Fiddle

Upvotes: 1

Related Questions