How can I assign click function to many buttons using JQuery?

Question

I have 29 buttons: todayResultsbutton0 .. todayResultsbutton28,
and 29 divs: todayResultsUrls0 .. todayResultsUrls28.
I also have a function toggleVisibility(divName) that hide/show the given div. I am trying to use the following code:

for (var i=0;  i < 29; ++i) {
    var b = "#todayResultsbutton"+i;
    var d = "todayResultsUrls"+i;
    $(b).click(function(){toggleVisibility(d);});
}

I thought that this will cause each button click to show/hide the matching div but the actual result is that clicking on any button (0 .. 28) show/hide the last div - todayResultsUrls28.

Can someone tell me where am I wrong?
Thanks.

Could you post a sample of HTML? This will help us know how to structure the code. — John Strickler
– John Strickler, Commented Apr 5, 2011 at 14:43

Richard Marskell - Drackir · Accepted Answer · 2011-04-05 20:24:16Z

5

Use a class.

$(".myClass").click(function() {
  var d = $(this).attr("id").replace("button", "Urls");
  toggleVisibility(d);
});

edited Apr 5, 2011 at 20:24

Richard Marskell - Drackir

13.4k3 gold badges37 silver badges55 bronze badges

answered Apr 5, 2011 at 14:38

Maxx

4,0828 gold badges35 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Richard Marskell - Drackir Over a year ago

This does not solve the problem of calling toggleVisibility(d)

Maxx Over a year ago

I fixed it up to suit your example. Just give all your buttons the same class and inside the click function replace the portion of the id that identifies it as a button as opposed to a url.

Patrick · Accepted Answer · 2011-04-05 14:44:59Z

2

Instead of trying to use a loop, you'd be better off using the selector to "find" your divs..

say you have something like:

<table>
<tr><td>
<input type="button" id="myButton" value="test" text="test" />
</td><td><div id="myDiv"></div></td></tr></table>

You can find myDiv by :

$('#myButton').parent().find('#myDiv').hide();

answered Apr 5, 2011 at 14:44

Patrick

7,7327 gold badges42 silver badges50 bronze badges

Comments

tvanfosson · Accepted Answer · 2011-04-05 14:44:59Z

1

You could use the "startsWith" attribute selector with the id, then build the url from the id of the clicked item.

$('[id^=todayResultsbutton]').click( function() {
     var url = this.id.replace(/button/,'Urls');
     toggleVisibility(url);
});

answered Apr 5, 2011 at 14:44

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

Comments

evotopid · Accepted Answer · 2011-04-05 14:42:56Z

0

Use

var d = "#todayResultsUrls"+i;

Instead of

var d = "todayResultsUrls"+i;

answered Apr 5, 2011 at 14:42

evotopid

5,4493 gold badges29 silver badges41 bronze badges

Comments

Richard Marskell - Drackir · Accepted Answer · 2011-04-05 14:47:36Z

You can use this:

$('button[id^="todayResultsbutton"]').click(function() {
    var index = this.id.substring(18,this.id.length);
    toggleVisibility("todayResultsUrls"+index);
});

This will find all <button> tags with id's starting with todayResultsbutton. It will then get the ID for the clicked tag, remove the todayResultsbutton part of it to get the id and then call the toggleVisibilty() function.

Example here.

Edit
Notes:

Using button before the starts with selector ([id^="todayResultsbutton"]) speeds up the jQuery selector because it can use the native getElementsByTagName function to get all button tags and then only check those for the specific ID.
this.id is used instead of jQuery's $(this).attr('id') because it's faster (doesn't require wrapping this or calling the extra function attr()) and shouldn't cause any cross-browser issues.

StuperUser · Accepted Answer · 2011-04-05 15:03:25Z

0

Toggle visibility by finding the relevent div usint the event target rather than classes etc.

Assuming:

<div id='todayResultsUrls1'>
    <button id='todayResultsbutton'></button>
</div>

Using the event target you can get the button element and find the div you want to hide.

var parentDiv = $(e.target).parent();
toggleVisibility(parentDiv);

edited Apr 5, 2011 at 15:03

answered Apr 5, 2011 at 14:46

StuperUser

10.9k14 gold badges85 silver badges143 bronze badges

Collectives™ on Stack Overflow

How can I assign click function to many buttons using JQuery?

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related