0

Есть такая разметка:

<div class="wrapper">
    <div id="main-slide">
        <img src="http://dummyimage.com/650x400/8a8a8a/fff" alt="">
    </div>
    <div id="slide-bar">
        <ul>
            <li><a href=""><img src="http://dummyimage.com/100x100/858111/fff" alt=""></a></li>
            <li><a href=""><img src="http://dummyimage.com/100x100/858222/fff" alt=""></a></li>
            <li><a href=""><img src="http://dummyimage.com/100x100/858333/fff" alt=""></a></li>
            <li><a href=""><img src="http://dummyimage.com/100x100/858444/fff" alt=""></a></li>
            <li><a href=""><img src="http://dummyimage.com/100x100/858555/fff" alt=""></a></li>
        </ul>
    </div>
</div>

Как с помощью JavaScript я могу подцепить клик по элементам li?

Такой код не работает:

var some = document.getElementById('slide-bar').getElementsByTagName('ul')[0].getElementsByTagName('li');
some.onclick = function(){};
3
  • Вы не сделали 1) цикл, 2) не вошли в "подкаталог" ul (firstChild).
    – nick_n_a
    Commented 1 июн. 2016 в 10:57
  • Что значит подцепить? Подписаться на событие? Выбрать все элементы. Пройтись по всем элементам и добавить событие addEventListener('click', function (){/*чтохотитеделатьприклике*/}) Commented 1 июн. 2016 в 14:18
  • Нужно сделать так что-бы при клике на любой из "li" происходило одинаковое действие.
    – Kardanx
    Commented 1 июн. 2016 в 19:57

1 ответ 1

1

https://plnkr.co/edit/YDViqpOH2Zm0MRouUvPZ?p=preview

document.addEventListener("click", // здесь повесили обработчик на весь документ и на все клики
  function(e) {
    e.preventDefault();
    if (e.target.hasAttribute("data-slider")) { // здесь непосредственно ловим клик по нужному элементу
      alert('Спасибо!')
    }
  });

Только чтобы клик отработал поправь немного css стили и назначь элементу li {display: block} или лови клик на самой ссылке(тэг a). Ну и чем удобен этот подход, так это тем, что остальные события можно тут же и фильтовать.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.