Question

我想使用相同的功能分别切换到不同的div。每个div都有一个共同的类和一个不同的id。在两个单独的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">

我首先尝试使用getElementsByClassName获取这些div，但是由于它返回HTMLCollection，因此脚本无法单独定位每个div。

因此，我尝试选择<a>标签ID（btnOne和btnTwo），但是无法弄清楚如何使用这些ID来检索divs类（因为我们在这里讨论的是两个不同的元素）。

最后，我回到了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

有一种简单的方法来选择具有其类名的div，而您已经使用了它。答案是getElementsByClassName。但是在普通的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";
   }
}

通过这种方式，您将针对此类的所有div。

Answer 2

我将使用它们的类在开关上动态添加事件。我向他们添加了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 3

您可以使用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 4

使用substr从锚点ID中提取“ btn”后得到单词，结果为一或二，然后在定义if use“ div” + word的同时使用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";
    }
};

Javascript-使用onclick获取另一个元素的类

4 个答案: