Назначение щелчка элементам в функции зацикливания

0

Я импортирую детей из #parentEle, создавая копию каждого и нажимая этот скопированный объект в массив с новым ID - #eleCopy(i)

Я также пытаюсь назначить функцию щелчка на импортированный исходный объект. Щелчок по нему изменит CSS его копии (ссылка на массив). Но затронутая копия всегда одна и та же: последняя загружена. Я надеялся ссылаться на него по номеру индекса в массиве... Как "заморозить" правильную ссылку на массив в функции щелчка, так что $(this) 0 будет соответствовать ar [0], $ (this) '1 to ar [1] и так далее?

var ar = [];
var i = 0;

$('#parentEle').children().each(function() {

        ... // copy of $(this) is created: $('#eleCopy'+i)

        ar.push($('#eleCopy'+i));


        $(this).on('click', function() {

            ar[i].css({ ... });

        });

        i++;

});
  • 0
    почему ты делаешь этот комплекс? Вы можете назначить событие клика отдельно, также используя делегирование события.
Теги:

3 ответа

2
Лучший ответ

Пожалуйста, ознакомьтесь с этими вопросами для объяснения проблемы:

В вашем случае решение довольно просто: поскольку вы уже используете .each, нет необходимости хранить внешний счетчик. Текущий индекс передается на вызов в качестве аргумента:

// method signature: each( function(index, Element) )
$('#parentEle').children().each(function(i) {
    ... // copy of $(this) is created: $('#eleCopy'+i)
    ar.push($('#eleCopy'+i));

    $(this).on('click', function() {
        ar[i].css({ ... });
    });
});

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

$('#parentEle').children().each(function(i) {
    var $copy = ...; // copy of $(this) is created: $('#eleCopy'+i)
    $(this).on('click', function() {
        $copy.css({ ... });
    });
});

Это работает, потому что обработчик события, который вы связываете, является закрытием.

Недостатком обоих этих решений является то, что вы создаете новый обработчик событий на каждой итерации, хотя все они делают то же самое. Вы можете использовать jQuery .data API для хранения ссылки на клон с исходным узлом и связать один обработчик событий с элементами:

$('#parentEle').children().each(function(i) {
    var $copy = ...; // copy of $(this) is created: $('#eleCopy'+i)
    $(this).data('copy', $copy);
}).on('click', function() {
    $(this).data('copy').css({ ... });
});
Поделиться
  • 0
    массив служит и для других целей, поэтому я надеялся использовать его и для этой цели ... Я редактирую вопрос, чтобы уточнить, как клонируется $ (this), поскольку я до сих пор не получил ответ на щелчок ...
  • 0
    Хорошо, но дело в том, что вам не нужно использовать массив (или, если уж на то пошло, i ) для ссылки на клонированный элемент.
Показать ещё 1 комментарий
1

Это проблема масштаба.

Когда происходит событие click и выполняется ar[i].css({... }), значение я уже было увеличено на все вызовы

i++;

Таким образом, i равно числу детей #parentEle

Чтобы иметь желаемое поведение, оберните код в закрытие:

замещать

$(this).on('click', function() {
    ar[i].css({ ... });
});

с

(function(i) {
    $(this).on('click', function() {
        ar[i].css({ ... });
    });
})(i);

Для получения дополнительной информации о закрытии javascript см. Этот ответ

Поделиться
  • 0
    ... Я ничего не получаю при нажатии ...
  • 0
    Я перейду к вашей рекомендации, сфера - это то, что мне нужно освежить. Ваш пример, возможно, действительно работал над более тщательным рассмотрением других частей моего кода. Спасибо
0

Почему нет:

$('#parentEle').find('[id^="eleCopy"]').each(function() {
    $(this).css({ ... });
}

каждый()

Начинается с

Поделиться
  • 0
    Что заставляет вас думать, что копии элементов являются потомками одного и того же родителя?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню