Как добавить Event Listener на несколько тегов одновременно - PullRequest
Новая
       56

Как добавить Event Listener на несколько тегов одновременно

0 голосов
/ 23 октября 2018

Я новичок в Javascript.и у меня есть эти изображения, которые я хочу заменить на основной-IMG код ниже работает нормально, но я просто хочу знать, как это сделать, используя меньше кода в JavaScript 

<div id="container">
        <div id="side-img">
            <img id="side1" onclick="side1()" src="img1.jpeg">
            <img id="side2" onclick="side2()" src="img2.jpeg">
            <img id="side3" onclick="side3()" src="img3.jpeg">
            <img id="side4" onclick="side4()" src="img4.jpeg">
        </div>
        <div id="main-img">
            <img id="main" src="img0.jpeg">
        </div>

    </div>




    <script type="text/javascript">
        var sideimg = document.querySelectorAll('#side-img img');
        var main = document.querySelector('#main');

             function side1() {
                main.src = sideimg[0].src;
             }
             function side2() {
                main.src = sideimg[1].src;
             }
             function side3() {
                main.src = sideimg[2].src;
             }
             function side4() {
                main.src = sideimg[3].src;
             }


    </script>

Ответы [ 4 ]

0 голосов
/ 23 октября 2018

Делегация включена версия

JS 

const viewer = document.querySelector('#main');
document.addEventListener('click', (event) => {
    if (typeof event.target.hasAttribute('data-clickable') && event.target.src) {
        viewer.src = event.target.src;
    }
})

HTML 

<div id="container">
  <div id="side-img">
    <img id="side1" data-clickable src="img1.jpeg">
    <img id="side2" data-clickable src="img2.jpeg">
    <img id="side3" data-clickable src="img3.jpeg">
    <img id="side4" data-clickable src="img4.jpeg">
  </div>
  <div id="main-img">
    <img id="main" src="img0.jpeg">
  </div>
</div>
0 голосов
/ 23 октября 2018

Вы можете программно добавить обработчик для каждого изображения. 

document.querySelectorAll('img').forEach((img) => {
  img.onclick = () => {
    console.log(img.src)
    document.querySelector('#main').src = img.src
  }
})
<div id="container">
  <div id="side-img">
    <img id="side1" src="img1.jpeg">
    <img id="side2" src="img2.jpeg">
    <img id="side3" src="img3.jpeg">
    <img id="side4" src="img4.jpeg">
  </div>
  <div id="main-img">
    <img id="main" src="img0.jpeg">
  </div>

</div>
0 голосов
/ 23 октября 2018

Я бы предложил: 

// retrieving the common ancestor element of the <img> elements:
let sideImage = document.querySelector('#side-img'),

// defining a named function, using arrow syntax; 'e' is a reference
// to the event object, passed automatically from the
// EventTarget.addEventListener() method:
  imageChange = (e) => {

    // we retrieve the element with the 'id' of 'main', and update
    // its src property to be that of the clicked element;
    // e.target retrieves the element upon which the event was
    // originally triggered:
    document.getElementById('main').src = e.target.src;
  };

sideImage.addEventListener('click', imageChange);


let sideImage = document.querySelector('#side-img'),
  imageChange = (e) => {
    document.getElementById('main').src = e.target.src;
  };

sideImage.addEventListener('click', imageChange);
<div id="container">
  <div id="side-img">
    <img id="side1" src="https://via.placeholder.com/100.png?text=image1">
    <img id="side2" src="https://via.placeholder.com/100.png?text=image2">
    <img id="side3" src="https://via.placeholder.com/100.png?text=image3">
    <img id="side4" src="https://via.placeholder.com/100.png?text=image4">
  </div>
  <div id="main-img">
    <img id="main" src="img0.jpeg">
  </div>

</div>

JS Fiddle demo .

Применительно к вопросу, оставленному в комментариях, ОП:

Не могли бы вы объяснить, как контейнер #side-img просматривал каждое изображение и добавлял к ним прослушиватель событий?

Конечно, в этом случае мы использовали event-Делегирование использует преимущества того, как события протекают через DOM.

Вместо того, чтобы связывать прослушиватель событий с несколькими <img> элементами, мы воспользовались тем, как события протекают через DOM;это означает, что мы прослушали событие click по мере его достижения #side-img и взглянули на свойство target объекта Event, чтобы найти элемент, для которого событие было инициировано изначально.

Ссылки:

0 голосов
/ 23 октября 2018

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

<img id="side1" onclick="side(0)" src="img1.jpeg">
<img id="side2" onclick="side(1)" src="img2.jpeg">
<img id="side3" onclick="side(2)" src="img3.jpeg">
<img id="side4" onclick="side(3)" src="img4.jpeg">


И удалите все функции side () в вашем скрипте JS и добавьте эту функцию: 

var sideimg = document.querySelectorAll('#side-img img');
var main = document.querySelector('#main');

function side(index) {
    main.src = sideimg[index].src;
}
...