Java Код скрипта Работает только для первой кнопки? - PullRequest
Новая
       72

Java Код скрипта Работает только для первой кнопки?

0 голосов
/ 21 июня 2020

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

Вот мой код: 

for (let i = 0; i < 5; ++i) {
  const bnts = document.getElementsByClassName("dropbutton");
  bnts[i].addEventListener("click", showAndHide);

}

function showAndHide() {
  var click = document.getElementsByClassName("drop-content")[0];

  if (click.style.display === "none") {
    click.style.display = "block";
  } else {
    click.style.display = "none";
  }
};
<div class="dropdown">
  <button id="button1" class="dropbutton">Home</button>
  <div class="drop-content">
    <a href="#">Test1</a>
    <a href="#">Test2</a>
    <a href="#">Test3</a>
  </div>

  <button id="button1" class="dropbutton">Arrivals</button>
  <div class="drop-content">
    <a href="#">Test111</a>
    <a href="#">Test222</a>
    <a href="#">Test3</a>
  </div>

  <button id="button1" class="dropbutton">Clothing</button>
  <div class="drop-content">
    <a href="#">Test1123</a>
    <a href="#">Test212</a>
    <a href="#">Test3</a>
  </div>

  <button id="button1" class="dropbutton">Schoes</button>
  <div class="drop-content">
    <a href="#">Test1</a>
    <a href="#">Testaasdf2</a>
    <a href="#">Test3</a>
  </div>
</div>

Ответы [ 4 ]

0 голосов
/ 21 июня 2020
  1. делегат - тогда вам не нужен идентификатор на кнопке, который в любом случае должен быть уникальным.
  2. используйте тернар или переключите classList 

document.querySelector(".dropdown").addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("dropbutton")) {
    tgt.nextElementSibling.classList.toggle("show")
  }
})
.drop-content {
  display: none
}

.show {
  display: block
}
<div class="dropdown">
  <button class="dropbutton">Home</button>
  <div class="drop-content">
    <a href="#">Test1</a>
    <a href="#">Test2</a>
    <a href="#">Test3</a>
  </div>

  <button class="dropbutton">Arrivals</button>
  <div class="drop-content">
    <a href="#">Test111</a>
    <a href="#">Test222</a>
    <a href="#">Test3</a>
  </div>

  <button class="dropbutton">Clothing</button>
  <div class="drop-content">
    <a href="#">Test1123</a>
    <a href="#">Test212</a>
    <a href="#">Test3</a>
  </div>

  <button class="dropbutton">Schoes</button>
  <div class="drop-content">
    <a href="#">Test1</a>
    <a href="#">Testaasdf2</a>
    <a href="#">Test3</a>
  </div>
</div>

Если вы хотите, чтобы контент находился под кнопками, а кнопки по горизонтали, используйте атрибуты данных 

document.querySelector(".dropdown").addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("dropbutton")) {
    const oldActive = document.querySelector("button.active");
    document.getElementById(oldActive.dataset.tgt).classList.toggle("show",0)
    document.getElementById(tgt.dataset.tgt).classList.toggle("show",1)
    oldActive.classList.toggle("active",0)
    tgt.classList.toggle("active",1)
  }
})
.drop-content {
  display: none
}

.show {
  display: block
}

.active { font-weight:bold }
<div class="dropdown">
  <button class="dropbutton active" data-tgt="home">Home</button>
  <button class="dropbutton" data-tgt="arrivals">Arrivals</button>
  <button class="dropbutton" data-tgt="clothing">Clothing</button>
  <button class="dropbutton" data-tgt="shoes">Schoes</button>

<div class="drop-content show" id="home">Home
    <a href="#">Test1</a>
    <a href="#">Test2</a>
    <a href="#">Test3</a>
  </div>

  <div class="drop-content" id="arrivals">Arrivals
    <a href="#">Test111</a>
    <a href="#">Test222</a>
    <a href="#">Test3</a>
  </div>

  <div class="drop-content" id="clothing">Clothing
    <a href="#">Test1123</a>
    <a href="#">Test212</a>
    <a href="#">Test3</a>
  </div>

  <div class="drop-content" id="shoes">Shoes
    <a href="#">Test1</a>
    <a href="#">Testaasdf2</a>
    <a href="#">Test3</a>
  </div>
</div>
0 голосов
/ 21 июня 2020

Попробуйте это ... 

const bnts = document.getElementsByClassName("dropbutton");
for (let i = 0; i < 5; ++i) {
    bnts[i].addEventListener("click", showAndHide);
}

Вы должны сначала создать коллекцию и только потом перемещаться по ней.

0 голосов
/ 21 июня 2020

Прежде всего, вы используете один и тот же идентификатор более одного раза. Это запрещено в HTML. Идентификаторы должны быть уникальными. Вы используете getElementsByClassName[0], который всегда возвращает первый элемент с этим классом. Поскольку drop-content всегда идет сразу после кнопки, вы можете выбрать нажатую кнопку, а затем получить элемент после кнопки в DOM, вызвав nextElementSibling.

Кроме того, вы установили l oop выполнить итерацию 5 раз, пока у вас всего 4 кнопки, поэтому всегда рекомендуется использовать l oop в зависимости от количества кнопок, сделав l oop зависимым от количества кнопок.

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

const btns = document.getElementsByClassName("dropbutton");

for (let i = 0; i < btns.length; ++i) {
  btns[i].addEventListener("click", showAndHide);

}

function showAndHide() {
  var click = this.nextElementSibling;

  if (click.style.display === "none") {
    click.style.display = "block";
  } else {
    click.style.display = "none";
  }
};
<div class="dropdown">
  <button class="dropbutton">Home</button>
  <div class="drop-content">
    <a href="#">Test1</a>
    <a href="#">Test2</a>
    <a href="#">Test3</a>
  </div>

  <button class="dropbutton">Arrivals</button>
  <div class="drop-content">
    <a href="#">Test111</a>
    <a href="#">Test222</a>
    <a href="#">Test3</a>
  </div>

  <button class="dropbutton">Clothing</button>
  <div class="drop-content">
    <a href="#">Test1123</a>
    <a href="#">Test212</a>
    <a href="#">Test3</a>
  </div>

  <button class="dropbutton">Schoes</button>
  <div class="drop-content">
    <a href="#">Test1</a>
    <a href="#">Testaasdf2</a>
    <a href="#">Test3</a>
  </div>
</div>
0 голосов
/ 21 июня 2020

Используйте https://developer.mozilla.org/en-US/docs/Web/API/Event/target

function showAndHide(event){
   var click = event.target;
...