jquery增量值

Question

我没有受过javascript方面的教育，所以我需要帮助。获得如下的jquery代码

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

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

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

所以问题是如何写变量(mediaplayer-1，mediaplayer-2....)因此，您不必总是写相同的代码行。我的意思是这个id的数字的增量值。

Answer 1

首先，您需要一个正确的触发方法：

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

或者通过在player-1旁边添加player-trigger类来使其动态，等等：

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

现在你需要从你的“ID类”(player-1)中去掉唯一的ID。还要注意的是，我正在删除player-trigger..or，这将不起作用：

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

现在，让我们将所有这些与show()函数放在一起：

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

因此，在这种情况下，您的HTML应该看起来像这样：

<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

示例：

但是，正如您可能注意到的，它删除了player-trigger类，尽管看起来cool..you可能希望这样做：

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

。。等

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

示例2:

Answer 2

正确的做法是将事件侦听器仅提供给所有事件的父事件侦听器。

$('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

});

只需一次单击所有元素的事件侦听器，无论有多少个。

这就是事件侦听器的实现方式，这样可以节省大量的资源。

检查此example here。

我使用了一个正则表达式来解析正确的类并找到玩家的ID，然后使用这个ID来查找您想要以动态方式显示的元素。

Answer 3

我建议使用for循环：

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