jQuery - Using the same script for multiple pairs of items

Question

Sure this must've been asked here before but can't find anything.

I have a page with a list of buttons on the left, and a list of divs on the right. Each button has a class that corresponds to the ID of the div. So for example, button one is ".button1" and when clicked, does something to "#div1", ".button2" to "#div2" and so on. If this was my script:

$('.button1').click(function(){
    $("#div1").css("color","red");
});
$('.button2').click(function(){
    $("#div2").css("color","red");
});
and so on...

...instead of repeating it for every pair, I know I could get the class of the clicked button, check the number on the end, check the div ID's and match it with the corresponding one.

But I don't know how to go about it!

Is it possible to have couple classes associated with the same button? — Denys Denysenko, Jul 19 '13 at 09:05
@DavidThomas It could be structured any way really, I was interested to see different takes on this before I decided on the structure for definite. — Marlon Creative, Jul 19 '13 at 09:46

mara-mfa · Accepted Answer · 2013-07-19T09:07:32.600

1

what about something like this?

Working jsFiddle: http://jsfiddle.net/AWvv5/2/

Assign click handler to the whole btn class and then, simply replace "btn" with "div" inside the handler.

HTML:

<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>

<button id="btn1" class="btn">Button 1</button>
<button id="btn2" class="btn">Button 2</button>
<button id="btn3" class="btn">Button 3</button>

Javascript:

$(".btn").click(function(e){
    var divId = this.id.replace("btn","div");
    $("#"+divId).css("color","red");
});

edited Jul 19 '13 at 09:07

answered Jul 19 '13 at 09:02

mara-mfa

895
6
9

Why adding one event handler to each button? This is a school book example of when event delegation is suited for the job. – Johan Bouveng Jul 19 '13 at 09:25
@JohanBouveng only when the structure is suitable for event bubbling. We haven't seen any HTML from the OP. – mabi Jul 19 '13 at 09:33
Great, this is working fine for my current html structure so I'll accept this as the answer! – Marlon Creative Jul 19 '13 at 09:46
@mabi When would the structure not be suitable for event bubbling? – Johan Bouveng Jul 19 '13 at 10:57
@JohanBouveng When you have no container for the buttons. Attaching your handler to the body scares the legacy maintainer in me (though I really like it's simplicity). – mabi Jul 19 '13 at 11:35
@mabi Of course, but these elements should live in a list, fieldset or something. They must be grouped by something. – Johan Bouveng Jul 19 '13 at 11:39

score 1 · Answer 2 · answered Jul 19 '13 at 09:14

Ew, here is a minimal working example using event delegation. This works as a charm even if there is 999 buttons. People should stop abusing by adding 999 event handlers when its not needed.

http://jsfiddle.net/5YYDU/

$("#buttons").on("click",":button",function(e){
    $("#div"+$(this).attr("id").replace(/[^0-9]/g, '')).css("background","red");
});

score 0 · Answer 3 · edited May 23 '17 at 11:56

0

Following jQuery - match element that has a class that starts with a certain string I'd use

$("button[class*='id_prefix']").click(function(){
  var classes = $(this).attr('class').split(' ');
  var selector = $.grep(classes, function(el)
    { return el.startsWith('id_prefix'); }
  )[0];
  $('#' + selector).css('color', 'red');
});

edited May 23 '17 at 11:56

Community

1
1

answered Jul 19 '13 at 09:07

mabi

5,279
2
43
78

Dom Day · Answer 4 · 2013-07-19T09:31:24.077

For a bit more flexibility, you can set a target for each button, rather than relying on matching names, like so: http://jsfiddle.net/AKkG8/

<button class="btn" data-target="#div1">1</button>
<button class="btn" data-target="#div2">2</button>
<button class="btn" data-target="#div4">3, sets 4</button>
<button class="btn" data-target="#div3">4, sets 3</button>

<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>

js

$(".btn").on("click", function () {
    $($(this).data('target')).toggleClass('clicked');
})

css

div {
    padding: 30px;
    margin: 5px;
    background-color: #e0e0e0;
}
button {
    padding: 5px;
    margin: 5px;
    background-color: #e0e0e0;
}
.clicked { background-color: #808080; }

jQuery - Using the same script for multiple pairs of items

4 Answers4