Нажав на ссылку для отображения изображений

Question

Я новичок в программировании и работе на веб-сайте, который отображает список ссылок. Нажав на определенную ссылку, вы увидите несколько изображений. Теперь мне интересно, нужно ли добавлять слушателя событий к каждой ссылке, потому что, если у меня есть 100 ссылок, значит, мне придется писать 100 прослушивателей событий?

document.getElementById("monkwhosold").addEventListener("click",function() {disp_img(/MonkWhoSold)}); 

выше слушатель событий представляет собой пример, в котором пользователь нажимает одну из ссылок и функция disp_img вызываются с путем к папке IMG передается в качестве параметра.

Answer 1

Если у вас много ссылок, приобретите элементы по классам.

JavaScript:

document.getElementsByClassName("imageLink").addEventListener("click", function() { 
     //do something 
}); 

JQuery

$('.imageLink').on('click', function() { 
     //do something 
}); 

Таким образом, у вас есть одна функция, а не одну функцию за ссылку.

Answer 2

Существует много способов решить эту проблему. Вот он.

<a href="#" class="image-link" data-url="/MonkWhoSold"> 
<a href="#" class="image-link" data-url="/AnotherImage"> 
... 

Тогда в JavaScript вы можете написать:

// find all <a> tags with class of 'image-link' 
var links = document.querySelectorAll('a.image-link'); 

// loop through them all 
for (var i = 0; i < links.length; i++) 
{ 
    var link = links[i]; 
    // listen for the click event 
    link.addEventListener('click', function() 
    { 
     // on click, show the image using the URL from the data-url attribute 
     disp_img(link.data.url); 
    }); 
} 

Это не использует JQuery. Если вы начинаете программировать в эти дни, я думаю, что стоит изучить материал DOM напрямую. Когда-то это было непросто или не работало в браузерах, и jQuery был действительно ценным. В наши дни это не так, хотя это все еще может быть весьма удобным.

В этом коде есть только три функции вам действительно нужно, чтобы узнать:

• querySelectorAll найти все элементы, которые соответствуют какому-то селектору CSS
• addEventListener присоединять функцию обратного вызова для конкретного события
• element.data для доступа к данным, хранящимся в data-foo="bar" атрибутах HTML

За исключением t шляпа это for, function и другие простые элементы языка.

Answer 3

Прежде всего, я рекомендую вам использовать что-то вроде jQuery по многим причинам.

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

<div id="myLinks"> 
    <a href="...">link1</a> 
    <a href="...">link2</a> 
    ... 
</div> 

Использование

$('#myLinks a').on('click', function() {disp_img($(this).attr("href"))}); 

Это как код, который вы написали с помощью простой Javascript. Но, как и ваш, таким образом вы создаете обработчик для каждого изображения (очень медленно).

Но я рекомендую использовать этот один:

$('#myLinks').on('click', 'a', function() {disp_img($(this).attr("href"))}); 

Потому что в этом случае вы используете только один приемник для всех ссылок. Это более результативно!