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中的按钮时，打开属于该父级的文本块。

VBA Last Change Method

Answer 1

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

您需要一个EventListener按钮。我更新了你的小提琴： 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 2

好吧，让我们使用document.querySelectorAll来更新你的脚本并使用更现代的JS。

＆＃13;

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");
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

这是您正在寻找的结果吗？按钮将自身传递给toggle函数，然后我们在HTML中查找，我们查看此元素的所有HTML元素，搜索带有'allo'类的元素，在找到此元素后，我们更改其显示。另一个元素没有受到伤害。

JAVASCRIPT：

myCollection.reduce(function(model, memo) {...})

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

3 个答案: