jquery increment value

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

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/

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.

I would suggest using a for-loop:

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

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

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/