Javascript - получить класс другого элемента с помощью onclick

Question

Я хочу по отдельности переключаться на разные div, используя одну и ту же функцию.У каждого из этих элементов есть общий класс и разные идентификаторы.Функция toggle вызывается с использованием параметра onclick для двух отдельных элементов <a>:

<a class="btn" id="btnOne" onclick="toggler();">Show/hide divOne</a>
<div class="box" id="divOne">

<a class="btn" id="btnTwo" onclick="toggler();">Show/hide divTwo</a>
<div class="box" id="divTwo">

Сначала я попытался получить эти div с помощью getElementsByClassName, но, поскольку он возвращает HTMLCollection, сценарий не можетнацеливайтесь на каждый div отдельно.

Поэтому я попытался выбрать идентификаторы тегов <a> (btnOne и btnTwo), но не смог выяснить, как получить класс div с помощью этих идентификаторов (как мы говорим одва разных элемента здесь).

В конце я вернулся к методу getElementById, так как не мог понять, как их выбирать в зависимости от их класса:

function toggler() {
    var id = document.getElementById("divId");
    if (id.style.display === "none") {
        id.style.display = "block";
    } else {
        id.style.display = "none";
    }
};

Этооставляет мне две функции вместо одной.Любое предложение о том, как нацелиться на два div отдельно?

Answer 1

Вы можете получить доступ к следующему брату, используя nextElementSibling, предполагая, что поле всегда будет сразу после гиперссылки.

// Put the buttons into an array
const buttons = [...document.getElementsByClassName("btn")];
// Assing an event listener for every button
buttons.map(button => button.addEventListener("click", function(e) {
  // Find the next sibling
  const box = e.target.nextElementSibling;
  // Toggle the display value
  if (box.style.display === "none") {
    box.style.display = "block";
  } else {
    box.style.display = "none";
  }
}));

a {
  display: block;
}

.box {
  width: 5rem;
  height: 2rem;
  background-color: blue;
}

<a class="btn">Show/hide divOne</a>
<div class="box"></div>

<a class="btn">Show/hide divTwo</a>
<div class="box"></div>

Answer 2

Используйте substr, чтобы получить слово после извлечения 'btn' из идентификатора якоря, что приведет к значению один или два, а затем при определении слова if использовать «div» +, это даст ему div, связанный с тегом

function toggler() {
    var word=this.id.substr(3);
    var id = document.getElementById("div"+word);
    if (id.style.display === "none") {
    id.style.display = "block";
    } else {
    id.style.display = "none";
    }
};

Answer 3

Я бы динамически добавлял события на коммутаторах, используя их классы.Я добавил класс showHideDivBtn к ним.Чтобы убедиться, что вы знаете, какой div нужно переключить, я использовал data-id.

. С addEventListener я могу использовать переменную события, которую я назвал e.С этим у меня есть доступ к свойствам, таким как data-id, который я написал.

let buttons = document.getElementsByClassName("showHideDivBtn");
for (let i = 0; i < buttons.length; ++i)
{
    buttons[i].addEventListener('click', function(e)
    {
        let divToToggle = document.getElementById(e.srcElement.dataset.id);
        if (divToToggle.style.display === "none")
            divToToggle.style.display = "block";
        else
            divToToggle.style.display = "none";
    });
}

<a class="btn showHideDivBtn" data-id="divOne" id="btnOne">Show/hide divOne</a>
<div class="box" id="divOne">One</div>
<br />
<a class="btn showHideDivBtn" data-id="divTwo" id="btnTwo">Show/hide divTwo</a>
<div class="box" id="divTwo">Two</div>

Answer 4

Существует простой способ выбрать div с именем класса, и вы уже использовали его.Ответ getElementsByClassName.Но в vanilla JS все немного (слишком) сложно.
Он не будет нацелен на оба div по отдельности.Вместо этого, если вы хотите выбрать первый div с этим классом, вы бы сделали это следующим образом:

getElementsByClassName('classname')[0]

Если вы хотите выбрать второй div, вы бы использовали:

getElementsByClassName('classname')[1]

и так далее.Но, конечно, есть способ.
Вы хотите использовать циклы:

var x = document.getElementsByClassName("classname");
for (var i = 0; i < x.length; i++) {
   if (x[i].style.display === "none") {
      x[i].style.display = "block";
   } else {
      x[i].style.display = "none";
   }
}

Таким образом, вы будете нацеливать ВСЕ дивы с этим классом.