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

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/