Question

我正在尝试使用vanilla JavaScript在具有相同类的元素上切换display: none和display: block。它主要起作用，但出于某种原因，你需要点击两次按钮才能正常工作，它正在吞噬我。代码和CodePen的链接如下。

HTML：

<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
<div class="d">d</div>

<button onclick="toggle('a')">Toggle A</button>
<button onclick="toggle('b')">Toggle B</button>
<button onclick="toggle('c')">Toggle C</button>
<button onclick="toggle('d')">Toggle D</button>

JS：

function toggle(div) {
  var divs = document.getElementsByClassName(div);

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

}

演示：

CodePen

Answer 1

将样式属性添加到div ..

<div class="a" style="display:block">a</div>
<div class="b" style="display:block">b</div>
<div class="c" style="display:block">c</div>
<div class="d" style="display:block">d</div>

Answer 2

我会这样做：

<div class='a'>a</div>
<div class='b'>b</div>
<div class='c'>c</div>
<div class='d'>d</div>

<input type='button' id='aT' value='Toggle A' />
<input type='button' id='bT' value='Toggle B' />
<input type='button' id='cT' value='Toggle C' />
<input type='button' id='dT' value='Toggle D' />

将外部JavaScript代码放在<head>中以进行缓存：

var pre = onload;
onload = function(){
if(pre)pre();
var doc = document, bod = doc.body;
function E(e){
  return doc.getElementById(e);
}
function C(n){
  if(doc.getElementsByClassName){
    return doc.getElementsByClassName(n);
  }
  var t = doc.getElementsByTagName('*'), a = [];
  for(var i=0,l=t.length; i<l; i++){
    if(t[i].className.match(new RegExp('\\b'+n+'\\b'))){
      a.push(t[i]);
    }
  }
  return a;
}
function getStyleProp(elem, prop){
  return getComputedStyle(elem).getPropertyValue(prop) || elem.currentStyle[prop];
}
function toggle(elem){
  elem.style.display = getStyleProp(elem, 'display').match(/^block$/i) ? 'none' : 'block';
  return elem;
}
var btns = ['a', 'b', 'c', 'd'];
for(var i=0,l=btns.length; i<l; i++){
  (function(i){
    var b = btns[i], c = C(b);
    E(b+'T').onclick = function(){
      for(var n=0,q=c.length; n<q; n++){
        toggle(c[n]);
      }
    }
  })(i);
}
}

Answer 3

将display: block;添加到DIV的CSS定义中。

Answer 4

你的var divs = document.getElementsByClassName(div);只返回一个元素，因为该类只有一个元素。

<div id="blocks'>
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="d">d</div>
</div>

function toggle(div) {
  var divs = document.getElementById('blocks');
  var ele = blocks.getElementsByTagName("div');
  var sty = "";

    for(var i = 0; i < ele.length; i++) {
      sty = ( ele[i].className.indexOf( div ) ) ? 'block' : 'none';
       ele[i].style.display = sty;
      }
    }
}

JavaScript切换显示

4 个答案: