jquery increment value

Question

I'm not educated in javascript so I nedd help. Got jquery code like this

$('.player-1').click(function(){
 $("#mediaplayer-1").show();
});
$('.player-2').click(function(){
 $("#mediaplayer-2").show();
});
$('.player-3').click(function(){
 $("#mediaplayer-3").show();
});
.....

So the question is how do write variable (mediaplayer-1, mediaplayer-2....) so you don't have to write the same lines all the time. I mean increment value of the number of this id

• Caspar Kleijne: For a beginner in JavaScript your code is excellent to read. That is a big advantage. Why make it harder when it works?

Answer 1

First you need a correct triggering method:

$('.player-1, .player-2, .player-3').click(function () {
 // Do something
});

Or make it dynamic by adding player-trigger class next to player-1 and etc:

$('.player-trigger').click(function () {
 // Do something
});

Now you need to cut the unique ID out from your "ID-class" (player-1). Also note, that Im removing the player-trigger..or this wouln't work:

$('.player-trigger').click(function () {
 var player_id = $(this).removeClass('player-trigger').attr('class').replace('player-', '');
 alert('Player is ' + player_id + ' in this case!');
});

And now lets put all this together with the show() function:

$('.player-trigger').click(function () {
 var player_id = $(this).removeClass('player-trigger').attr('class').replace('player-', '');
 $("#mediaplayer-" + player_id).show();
});

So in this case, your HTML should look kinda like this:

<span class="player-1 player-trigger">Show player</span>
<div id="mediaplayer-1">Das ist das eine player hier</div>
<span class="player-2 player-trigger">Show player</span>
<div id="mediaplayer-2">Das ist das eine player hier</div>
.. etc

Example: http://jsfiddle.net/hobobne/hLfuH/1/

---

However, as you probably noticed, it removes the player-trigger class, though it looks cool..you might want to do this like this:

<span id="player-1" class="player-trigger">Show player</span>
<div id="mediaplayer-1">Das ist das eine player 1 hier</div>

.. etc

$('.player-trigger').click(function () {
 var player_id = $(this).attr('id').replace('player-', '');
 $("#mediaplayer-" + player_id).show();
});

Example 2: http://jsfiddle.net/hobobne/hLfuH/2/

• arekk: cool, thanks for this great explanation! thank you all guys I've learned a lot through your answers

Answer 2

The right thing to do is to give the event listener to ONLY the parent of them all.

$('parent of your player elements').click(function(e) {
 // e.target is now the element which originated the click event
 // here you can check for the element class and
 // retrieve the corresponding element to show
});

Only one click event listener for all your elements at once, no matter how many.

This is how event listener should be implemented, this way you save a lot of resources.

Check this example here.

I used a regex to parse the right class and find the ID of the player, then use the ID to find the element you want to show dinamically.

• Jose Faeti: Edited with a concrete example. Anyway I suggest you to give them an ID instead of a class, like id="player-1" and so on, because ID are meant to identify different unique objects.

Answer 3

I would suggest using a for-loop:

for (var i = 1; i <= 3; i++) {
 $('.player-' + i).click(function(){
 $("#mediaplayer-" + i).show();
 });
}

Answer 4

for(var i = 1; i < maxNum; i++){
 $('.player-' + i).click(function(){
 $("#mediaplayer-" + i).show();
 });
}

where maxNum is the total number of handlers you are trying to attach to

Answer 5

You need to be wary of closures if you're using a for loop, see this question - Event doesn't get added in a for-loop

Try -

for (var i = 0; i < 3; i++) {
 $('.player-' + i).click((function(i) {
 return function() {
 $("#mediaplayer-" + i).show();
 }
 })(i));
}

Working demo - http://jsfiddle.net/KQH8f/

• Kalle H. Väravas: These for methods have a drawback. You always need a max. number of the players. I think in the OP's case the players amount is dynamic. There for for() as a dynamic solution is not good.
• Jose Faeti: @Kalle It's not difficult at all to find the max number of players, even if they come and go.. the OP code is ugly and impossible to mantain.
• Kalle H. Väravas: @Jose Yes of course, for example: $('div[class*=player-]').size();. But IMO, for() loop is unnecessary.
• Jose Faeti: @Kalle I agree for loop is completely unnecessary. Better to use one event listener for the parent only.