Использование JavaScript/jQuery для отображения идентификатора элемента при наведении указателя мыши

Я пытался понять это, но еще не знаю.

Я создаю столбец в html привязанных тегов, и я хотел бы знать идентификатор того, у кого есть указатель мыши над ним.

Это должно быть просто, но кажется, что я ударил стену, и я не вижу, как это решить.

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

Любые предложения действительно приветствуются.

Вот мой код:

//Anchor builder
var numberOf = flatParamDateArray.length;

for (i = 0; i < numberOf; i++) {
    var param2Slider = document.createElement("a");
    param2Slider.id = 'sliderAnchor' + i;
    sliderAnchorId = param2Slider.id;
    param2Slider.name = 'param2Slider';
    param2Slider.className = 'nav2Slider a';
    document.getElementById('nav2Slider').appendChild(param2Slider);
    $('.nav2Slider a').onmouseover = function() {
        console.log('flatParamDateArray index: ' + param2Slider.id);
    }
}
1
nl ja de
И что твой html? Частью проблемы является использование простых событий JavaScript с объектами jQuery. Это также выглядит намного сложнее, чем нужно.
добавлено автор David Thomas, источник
Как это говорит мне, как выглядит ваш html, покажите соответствующий код.
добавлено автор David Thomas, источник
Я использую это с плагином jquery, чтобы сделать анимацию с изображениями. У меня уже есть якорный столбец, который работает с одной анимацией. Но у пользователя есть возможность выбрать две анимации, поэтому я использую якорный столбец, который контролирует обе анимации. Вот почему я создаю якоря из «numberOf», который представляет собой количество изображений из одной анимации. И я хочу использовать наведение мыши для вызова изображений, соответствующих идентификатору привязки.
добавлено автор Probandot, источник
@DavidThomas - вот соответствующая часть, где я добавляю столбец якорных тегов: 'code' <td> <div id = 'slidesArea'> </div> </td> <td style = "position: absolute; right: 75px ; "> <div class = 'navSlider' id = 'navSlider'> </div> <div class = 'navSlider' id = 'nav2Slider'> </div> </td> 'code'
добавлено автор Probandot, источник
@DavidThomas В любом случае вопрос уже дан, спасибо за ваш интерес.
добавлено автор Probandot, источник

2 ответы

1. Move this out, and after the for-loop:

$('.nav2Slider a').onmouseover = function() {
    console.log('flatParamDateArray index: '+param2Slider.id);
}

2. Change onmouseover() to mouseover():

$('.nav2Slider a').mouseover(function() {
    console.log('flatParamDateArray index: '+param2Slider.id);
});

3. To get the ID, this is the code you need:

    console.log('flatParamDateArray index: '+ $(this).prop('id'));

Bonus:

Поскольку вы динамически добавляете ссылки, вы должны использовать .on() чтобы уменьшить количество обработчиков событий до одного (в отличие от одного элемента):

$('.nav2Slider').on('mouseover', 'a', function() {
    console.log('flatParamDateArray index: '+ $(this).prop('id'));
});
2
добавлено
Да, но есть проблемы с производительностью, особенно со многими динамическими ссылками. См. Эту статью: ваш-jquery-now-with-less-suck > Делегирование событий> jquery-event-delegation
добавлено автор Samuel Liew, источник
Обратите внимание, что на можно использовать даже без делегирования. $ (". nav2Slider a"). on ("mouseover", function() {...})
добавлено автор John Dvorak, источник
Эта скрипка не измеряет эффективность событий, которые фактически запускаются. Стоимость их добавления, IMO, незначительна. Я по-прежнему согласен, что делегирование часто является хорошей идеей.
добавлено автор John Dvorak, источник

Ваша переменная param2Slider является глобальной, а цикл для изменяет значение в каждом цикле. Это означает, что после завершения цикла param2Slider просто содержит последнее значение.

Попробуй это:

$('.nav2Slider a').on('onmouseover', function() {
    console.log('flatParamDateArray index: ' + $(this).attr('id'));
});

Edit: onmouseover... & of course you should move this snippet out of the loop

0
добавлено
Это справедливо, потому что он объяснил это намного лучше - и уделял больше внимания в первую очередь ;-)
добавлено автор AvL, источник
AvL благодарит за ваш ответ и за объяснение, почему я всегда получал одинаковое значение. Я выбираю ответы Сэмюэла, потому что он имеет более подробную информацию и помог мне лучше понять, как решить проблему. И у него был бонус .on :)
добавлено автор Probandot, источник
JavaScript Jobs — чат
JavaScript Jobs — чат
8 336 участник(ов)

JavaScript Jobs — чат для поиска работы и людей Правила оформления: https://teletype.in/@telegram-ru/r1WQe5F1m См. также: @mobile_jobs, @devops_jobs, @nodejs_jobs, @react_js, @angular_ru, @js_ru

JavaScript.ru
JavaScript.ru
7 932 участник(ов)

Сообщество сайта JavaScript.ru в Slack.

pro.js
pro.js
4 675 участник(ов)

Про JavaScript и NodeJS Invite: https://t.me/joinchat/Be4rsT5Rsgq30DHutjxXgA Правила: http://telegra.ph/ru-chat-rules-06-19 Вакансии только с ЗП, не чаще раза в неделю.

Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

JavaScript — русскоговорящее сообщество
JavaScript — русскоговорящее сообщество
3 269 участник(ов)

Рекомендуем сразу отключить уведомления Правила: https://rudevs.network/ByaMH6un7 См. также: @js_noobs_ru, @nodejs_ru, @typescript_ru, @react_js, @electron_ru Вакансии и поиск работы: @javascript_jobs

JavaScript Noobs — сообщество новичков
JavaScript Noobs — сообщество новичков
2 484 участник(ов)

Чат для новичков

javascript_ru
javascript_ru
915 участник(ов)

Сообщество любителей самого популярного языка программирования в мире. Чат основан в 2009 году. Логи: https://goo.gl/9EOeM7 Поддержка бота: @chat_linker (ссылка на репу внутри) Вам будут интересны @frontend_ru и @css_ru

jsChat
jsChat
603 участник(ов)

Чат посвященный программированию на языке javaScript Перед отправкой ссылки на Ваш контент посоветуйтесь с админом Все ссылки удаляются ботом автоматически

JavaScript for Zombies Chat
JavaScript for Zombies Chat
492 участник(ов)

Чат про JavaScript для настоящих zombie! Вход строго по приглашениям! Ссылка для строгих приглашений: https://t.me/joinchat/AAMBHz3Uyr0tuZ7VaB029g

All That JS
All That JS
417 участник(ов)

JS на русском