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/
精彩评论