我想单击一个元素来切换在完全不相关的元素上引用的类

Question

我想单击一个元素来切换在完全不相关的元素（不是子元素、父元素或兄弟元素）上引用的类：例如：

.HTML：

<div class="parent">
  <button class="btn">
    this is button!!!
  </button>
  <div class="allo">
    test
  </div>
</div>
<div class="parent">
  <button class="btn">
    this is button!!!
  </button>
  <div class="allo">
    test
  </div>
</div>

.CSS：

.allo {
  display: none;
}
.btn {
  padding: 10px;
}

JavaScript：（或类似的东西）

var el = document.getElementByClassName("allo");
  function toggle(){
    for (i=0; i<btn.length; i++) {
      if (el[i].style.display === 'none'){
        el[i].style.display = 'block';
      } else {
        el[i].style.display = 'none'
      }
    }
  }

单击父级

div 中的按钮时，打开属于该父级的文本块。

https://jsfiddle.net/5sw4btga/

Answer 1

好吧，

让我们为此使用document.querySelectorAll，并使用一些更现代的JS更新脚本。

var btn = document.querySelectorAll(".btn"); //we can select them on the same manner as css selectors.
var el = document.querySelectorAll(".allo");
//borrow array's forEach to iterate over the node list
//use call to pass the node list (btn) as this
Array.prototype.forEach.call(btn, function(element, index){
  //use bind to pass index to the function
  element.addEventListener("click", toggleViewFunc.bind(element, index), false);
  //use addEventListener to attach click handlers
});
function toggleViewFunc(index)
{
  //because the button is in the same parent as the div "allo" the indices match. 
  //if this is not the case you could use this.nextSibling instead of el[index] because "allo" is the sibling of button.
  //use classlist and toggle to turn show or off.
  el[index].classList.toggle("show");
}

.allo {
  display: none;
}
.btn {
  padding: 10px;
}
/*introduce extra show class */
.show{
  display: block !important;
}

<div class="parent">
  <button class="btn">
    this is button!!!
  </button>
  <div class="allo">
    test
  </div>
</div>
<div class="parent">
  <button class="btn">
    this is button!!!
  </button>
  <div class="allo">
    test
  </div>
</div>

Answer 2

• 问题 1：在 for 循环中使用 i 之前，您没有声明它。
• 问题2：您有一个错别字，它是getElementsByClassName，而不是getElementByClassName

您将需要一个事件侦听器按钮。我更新了你的小提琴：https://jsfiddle.net/6oz0tsgp/

/* change "Element" to "Elements" */
var el = document.getElementsByClassName("allo");
var btn = document.getElementsByClassName("btn");
/* declare i */
var i = 0;
/** 
 *  call Array.prototype because the HTMLCollection 
 *  returned by getElementsByClassName does not have 
 *  a forEach-Property 
 */
Array.prototype.forEach.call(btn, function (current) {
   current.addEventListener('click', toggle, false);
})
function toggle(){
    for (i=0; i<btn.length; i++) {
        if (el[i].style.display === 'none') {
            el[i].style.display = 'block';
        } else {
            el[i].style.display = 'none'
        }
    }
} 

Answer 3

这是您要找的结果吗？按钮将自身传递给切换函数，然后我们在 HTML 中向上移动一个，我们查看该元素的所有 HTML 元素，搜索带有 'allo' 类的元素 ，找到这个元素后，我们改变它的显示。另一个元素不会受到伤害。

JAVASCRIPT：

var btn = document.getElementsByClassName("btn");
Array.prototype.forEach.call(btn, function (current) {
   current.addEventListener('click', toggle(current), false);
})
function toggle(el){
    var divParent = el.parentElement;
    var divsInsideParent = divParent.children;
    var divAllo = null;
    for (int i = 0; i < divsInsideParent.length; i = i + 1){
        if (divsInsideParent[i].classList.contains("allo")){
            divAllo = divsInsideParent[i];
        }
    }
    if (divAllo.style.display === 'none') {
        divAllo.style.display = 'block';
    } else {
        divAllo.style.display = 'none'
    }
}