Как эта цель нацелена на другой элемент? - PullRequest
Новая
       17

Как эта цель нацелена на другой элемент?

0 голосов
/ 26 марта 2020

У меня есть вопрос о нацеливании на другой элемент, а не на то, чтобы он указывал на элемент, щелкнувший в следующем коде.

https://codepen.io/jotnajoa/pen/gOpQdzV

Я не понимаю эту часть ниже. 

const addClassToStrings = addClassToEach(strings, className);

    btn.addEventListener('click', (el) => {
      if (addClassToStrings.next().done)
        el.target.classList.add(className);
    });

Если событие addClassToEach связано с кнопкой, я предположил, что событие .classList.add (className) будет применяться к самой кнопке. Потому что он нацелен на это.

Я думаю, что el.target ..... эта часть что-то делает. Может ли кто-нибудь помочь мне понять эту часть?

DEMO: 

const strings = document.querySelectorAll('.string');
const btn = document.querySelector('#btn');
const className = 'darker';

function* addClassToEach(elements, className) {
  for (const el of Array.from(elements))
    yield el.classList.add(className);
}

const addClassToStrings = addClassToEach(strings, className);

btn.addEventListener('click', (el) => {
  if (addClassToStrings.next().done)
    el.target.classList.add(className);
});
.string{width:50vmin;height:8vmin;margin:4vmin;transition:.3s ease;background:#90ee90}.string.darker{background:#343434;filter:blur(3vmin)}#btn{position:absolute;padding:5vmin 10vmin;color:#d6d6d6;font-size:8vmin;font-family:Roboto,sans-serif;user-select:none;background:#3749a2;border-radius:5%;top:5vmin;left:80vmin;transition:.3s ease;cursor:pointer}#btn:active,#btn:hover{border-radius:50%;box-shadow:1vmin 1vmin 1vmin grey}#btn.darker{border-radius:0;background:#343434;filter:blur(3vmin)}
<div class="string"></div>
<div class="string"></div>
<div class="string"></div>
<div class="string"></div>
<div class="string"></div>
<div class="string"></div>
<div class="string"></div>
<div class="string"></div>

<div id="btn">Click me</div>
...