How can I verify an element's attribute while employing Event Delegation?

Question

How can I verify an element's attribute while employing Event Delegation?

Is there a method to determine if a particular element has been activated using Event Delegation, based on its attribute, class, or 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>

Initially, all paragraphs are hidden. When clicking on one of the buttons, specific paragraphs are revealed, while others remain hidden. The challenge comes with managing multiple elements and their visibility efficiently without adding separate event handlers for each button.

I've implemented a solution involving individual event handlers for each button, showing and hiding specific paragraphs accordingly. However, as the number of elements grows, this approach becomes cumbersome. Are there alternative methods to streamline this process effectively?

javascript html jquery css jquery-events

Answer 1

Answer №1

In cases where the indices of buttons and paragraphs align, you can utilize the .index() method:

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

Check out the Fiddle Demo for demonstration.

If the indices are different, you can opt for using the data-* attribute approach:

<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>

To retrieve the value of the data-* attribute, simply use the .data() method:

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

Explore the Fiddle Demo to see it in action.

Answer 2

In cases where the indices of buttons and paragraphs align, you can utilize the .index() method:

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

Check out the Fiddle Demo for demonstration.

If the indices are different, you can opt for using the data-* attribute approach:

<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>

To retrieve the value of the data-* attribute, simply use the .data() method:

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

Explore the Fiddle Demo to see it in action.

Answer 3

Answer №2

Ensuring both the button and the p element are aligned in position, you can implement an index-based solution like this:

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

See it in action: Demo

Answer 4

Ensuring both the button and the p element are aligned in position, you can implement an index-based solution like this:

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

See it in action: Demo

Answer 5

Answer №3

Instead of using buttons, I prefer to utilize the <a> tags and assign the identifying task to the href attribute. For paragraphs, I rely on using id attributes.

<ul class="link-list">
    <li><a href="#first">Display the first paragraph</a></li>
    <li><a href="#second">Display the second paragraph</a></li>
    <li><a href="#third">Display the third paragraph</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 will 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 display our desired paragraph and hide its siblings
    $paragraph.show().siblings().hide();
    // ensure that the browser does not navigate to the link/anchor
    return false;
});

Fiddler

Answer 6

Instead of using buttons, I prefer to utilize the <a> tags and assign the identifying task to the href attribute. For paragraphs, I rely on using id attributes.

<ul class="link-list">
    <li><a href="#first">Display the first paragraph</a></li>
    <li><a href="#second">Display the second paragraph</a></li>
    <li><a href="#third">Display the third paragraph</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 will 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 display our desired paragraph and hide its siblings
    $paragraph.show().siblings().hide();
    // ensure that the browser does not navigate to the link/anchor
    return false;
});

Fiddler

How can I verify an element's attribute while employing Event Delegation?

Answer №1

Answer №2

Answer №3

Similar questions

Encountering an issue with Vuex action dispatch when using electron

What steps can be taken to deter users from repeatedly liking comments, similar to the systems seen on Facebook or YouTube for like/dislike features?

A step-by-step guide for invoking a JSON-based API

What is the best method to determine offsetTop in relation to the parent element instead of the top of

Rendering components asynchronously in ReactJS

List the acceptable favicon formats for Internet Explorer version 10 and above

Display the PHP variable's contents as a text string within an HTML document

issues with conditional statement

retrieve the src value of an image using jquery

What's the best way to align several buttons in the center of the screen horizontally?

Confusion arises between Bootstrap button plugin and Vue checkbox click event

Incorporate a sleek Vueitfy user interface seamlessly into your current website

Enhancing the appearance of the active menu item with HTML/CSS/JS/PHP

Picture not adapting correctly to various screen sizes

Unable to remove both top and bottom drop shadows

A step-by-step guide on showcasing database data on an HTML page using jQuery

Trigger AngularJS directive on page load

Adding style using CSS to a dynamically generated table row in Vue.js

Navigation for GitHub pages

What purpose does generating a JSON file serve when invoking getStaticProps in Next.js?