Question

我正在尝试为类列表设置模拟切换而不使用JQuery ，其工作低于IE 10，并显示多个元素（.show是display：block），但我的代码不起作用：

（单击框按钮时，会显示框和背景，您可以通过单击框关闭或背景来关闭框）

<script>
var classList = document.getElementsByClassName('openthis').className.split(" ");

function openbox() {
classList.push(" show");
};

function closebox() {
classList.pop ( );
};
</script>


<span onclick="openbox();" id="boxbutton">open the box</span>

<div class="openthis" id="box">
<div onclick="closebox();" class="boxclose">X</div>
</div>

<div onclick="closebox();" class="openthis" id="backdrop"></div>

请帮忙！

Answer 1

代码中的正确方法是使用claseList而不是className，因为它允许您从DOM节点添加或删除类。

我还删除了var classList因为不需要它，并且我已经使用类hidden初始化了隐藏的div（请查看CSS代码）。

openbox和closebox中的方法是使用类openthis获取注释，并根据具体情况添加或删除hidden类。

＆＃13;

function openbox() {
  var elements = document.getElementsByClassName('openthis');
  Array.prototype.forEach.call(elements, function(el) {
    el.classList.remove("hidden");
  });
};

function closebox() {
  var elements = document.getElementsByClassName('openthis');
  Array.prototype.forEach.call(elements, function(el) {
    el.classList.add("hidden");
  });
};

＆＃13;

.hidden {
  display: none;
}

＆＃13;

<span onclick="openbox();" id="boxbutton">open the box</span>

<div class="openthis hidden" id="box">
  <div onclick="closebox();" class="boxclose">X</div>
</div>

<div onclick="closebox();" class="openthis hidden" id="backdrop">
  Backdrop
</div>

＆＃13;

修改1：

第二个版本适用于不支持classList方法的浏览器。垃圾是否更贵但是有效！

＆＃13;

function openbox() {
  var elements = document.getElementsByClassName('openthis');
  Array.prototype.forEach.call(elements, function(el) {
    removeClass(el, "hidden");
  });
};

function closebox() {
  var elements = document.getElementsByClassName('openthis');
  Array.prototype.forEach.call(elements, function(el) {
    addClass(el, "hidden");
  });
};

function addClass(element, classToAdd) {
  var className = element.className;
  element.className = className + " " + classToAdd;
}

function removeClass(element, classToRemove) {
  var className = element.className;
  element.className = className.replace(new RegExp("(?:^|\\s+)" + classToRemove + "(?:\\s+|$)", "g"), "");
}

＆＃13;

.hidden {
  display: none;
}

＆＃13;

<span onclick="openbox();" id="boxbutton">open the box</span>

<div class="openthis hidden" id="box">
  <div onclick="closebox();" class="boxclose">X</div>
</div>

<div onclick="closebox();" class="openthis hidden" id="backdrop">
  Backdrop
</div>

＆＃13;

我希望有帮助：D

通过array.push和pop切换显示

1 个答案: