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-trigger等旁边添加player-1类来使其动态化：

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

现在您需要从“ID-class”（player-1）中删除唯一ID。另请注意，我删除了player-trigger ..或者这不起作用：

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

示例：http://jsfiddle.net/hobobne/hLfuH/1/

但是，正如您可能已经注意到的那样，它删除了player-trigger类，虽然看起来很酷..您可能想这样做：

<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：http://jsfiddle.net/hobobne/hLfuH/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来查找要以dinamically方式显示的元素。

Answer 3

我建议使用for循环：

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();
    });
}

其中maxNum是您尝试附加到

的处理程序总数

Answer 5

如果您使用for循环，则需要警惕闭包，请参阅此问题 - Event doesn't get added in a for-loop

尝试 -

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

工作演示 - http://jsfiddle.net/KQH8f/

jquery增量值

5 个答案: