значение приращения 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 ....), чтобы вам не приходилось писать одни и те же строки все время. Я имею в виду приращение значения этого идентификатора

Answer 1

Для начала вам нужен правильный метод запуска:

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

Или сделайте его динамическим, добавив player-trigger класс рядом с player-1 и т. Д.вырезать уникальный идентификатор из вашего «ID-класса» (player-1).Также обратите внимание, что я удаляю 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

});

Только один щелчок слушателя событий для всех ваших элементов одновременно, независимо от их количества.

Вот как должен быть реализован приемник событий, таким образом вы экономите много ресурсов.

Проверьте этот пример здесь .

Я использовал регулярное выражение дляПроанализируйте правильный класс и найдите идентификатор игрока, затем используйте этот идентификатор, чтобы найти элемент, который вы хотите показать динамически.

Answer 3

Вам нужно опасаться замыканий, если вы используете цикл for, смотрите этот вопрос - Событие не добавляется в цикл for

Попробуйте -

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

Рабочая демоверсия - http://jsfiddle.net/KQH8f/

Answer 4

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

где maxNum - общее количество обработчиков, к которым вы пытаетесь подключиться

Answer 5

Я бы предложил использовать цикл for:

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