Нужно дважды щелкнуть, чтобы добавить / удалить класс с Javascript - PullRequest
Новая
       0

Нужно дважды щелкнуть, чтобы добавить / удалить класс с Javascript

0 голосов
/ 19 января 2020

Я прочитал некоторые ответы здесь, похожие на мой вопрос, но я все еще не понимаю, что происходит.

У меня есть этот JS фрагмент: 

function renderButtons() {
  let buttonCollection = document.getElementsByClassName("btn");
  let arrayOfBtn = [...buttonCollection];

  arrayOfBtn.forEach(function(element) {
    function modifyClass() {
      element.classList.toggle("active");
    } 
   element.addEventListener("click", modifyClass);
  })
}

Это предназначен для добавления / удаления class «активного» * ​​1007 * при нажатии на него.

Это HTML: 

<div class="panel controls">
      <ul>
        <li>
          <button class="btn btn-pepperonni active">Pepperonni</button>
        </li>
        <li>
          <button class="btn btn-mushrooms active">Mushrooms</button>
        </li>
        <li>
          <button class="btn btn-green-peppers active">Green peppers</button>
        </li>
        <li>
          <button class="btn btn-sauce active">White sauce</button>
        </li>
        <li>
          <button class="btn btn-crust active">Gluten-free crust</button>
        </li>
      </ul>
    </div>

И это работает, проблема в том, что мне приходится дважды щелкать каждый раз на button, чтобы добавить или удалить class этой кнопки в частности.

Любая помощь будет очень признательна.

Большое спасибо!

Ответы [ 3 ]

0 голосов
/ 19 января 2020

Ваш JS должен быть загружен в конце вашего HTML. Ваш HTML загрузит контент от ТОПа до ДНА. Таким образом, ваш Scirpt хочет получить доступ к элементам "btn", которые на данный момент не генерируются.

Сначала HTML, затем JS.

Для такой короткой функции вы можете использовать встроенную функцию, как показано ниже. 

<!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">

    </head>
    <body>
        <div class="panel controls">
            <ul>
              <li>
                <button class="btn btn-pepperonni active">Pepperonni</button>
              </li>
              <li>
                <button class="btn btn-mushrooms active">Mushrooms</button>
              </li>
              <li>
                <button class="btn btn-green-peppers active">Green peppers</button>
              </li>
              <li>
                <button class="btn btn-sauce active">White sauce</button>
              </li>
              <li>
                <button class="btn btn-crust active">Gluten-free crust</button>
              </li>
            </ul>
          </div>
    </body>
    <script>

      var buttonCollection = document.getElementsByClassName("btn");

      for (var i = 0; i < buttonCollection.length; i++) 
      {
        buttonCollection[i].addEventListener("click", function(){
          this.classList.toggle("active");
       });
      }


    </script>
    </html>
0 голосов
/ 19 января 2020

Как показали предыдущие ответы, как исправить исходный код, я попытался найти упрощенную версию того, что вы хотите сделать.

В моем решении я использую «делегированную привязку события»: событие click привязывается к родительскому элементу <div> и срабатывает только тогда, когда фактическая цель клика имеет класс btn. Этот подход будет работать с элементами, которые даже не были созданы во время привязки. И это более «легкий», поскольку есть только одна привязка. 

document.querySelector("div.panel.controls")
 .addEventListener("click",function(ev){
   var cl=ev.target.classList;
   if (cl.contains("btn")) cl.toggle("active");
});
.active {background-color: #fcc}
<div class="panel controls">
  <ul>
    <li>
      <button class="btn btn-pepperonni active">Pepperonni</button>
    </li>
    <li>
      <button class="btn btn-mushrooms active">Mushrooms</button>
    </li>
    <li>
      <button class="btn btn-green-peppers active">Green peppers</button>
    </li>
    <li>
      <button class="btn btn-sauce active">White sauce</button>
    </li>
    <li>
      <button class="btn btn-crust active">Gluten-free crust</button>
    </li>
  </ul>
</div>
0 голосов
/ 19 января 2020

РЕДАКТИРОВАТЬ :

Удалите функцию RenderButtons и вместо этого переключайте «активный» класс, как только вы нажимаете кнопку на каждом ингредиенте: 

document.querySelector('.btn.btn-pepperonni').onclick = function() {
  state.pepperonni = !state.pepperonni;
  renderEverything()
  this.classList.toggle("active");
}

В основном вы вызываете два события onclick на кнопке, и они не работают вместе. Кроме того, вы чрезмерно усложняете все это своими функциями RenderButtons:)

Надеюсь, это поможет!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...