时间戳

首页 > 解决方案 > Button Toggle On/Off 按相同的 Div 类名称选择元素

javascript - Button Toggle On/Off 按相同的 Div 类名称选择元素

问题描述

我正在尝试简化此代码 - 有没有办法在一行代码而不是每一行代码中声明/压缩脚本变量 x 0-21？

<a onclick="myFunction()" id="load_more" class="testimonials_button">View More Testimonials</a

<script>
function myFunction() {
var x = document.getElementsByClassName("single_bottom_testi");
  x[0].style = "display:block";
x[1].style = "display:block";
x[2].style = "display:block";
x[3].style = "display:block";
x[4].style = "display:block";
x[5].style = "display:block";
x[6].style = "display:block";
x[7].style = "display:block";
x[8].style = "display:block";
x[9].style = "display:block";
x[10].style = "display:block";
x[11].style = "display:block";
x[12].style = "display:block";
x[13].style = "display:block";
x[14].style = "display:block";
x[15].style = "display:block";
x[16].style = "display:block";
x[17].style = "display:block";
x[18].style = "display:block";
x[19].style = "display:block";
x[20].style = "display:block";
x[21].style = "display:block";
}
</script>

标签： javascripthtmlcssgetelementsbyclassname

解决方案

我建议创建一个类，然后将该类添加到每个元素中，而不是直接修改样式。

<style>
.displayBlock{
  display: block;
}
</style>
<script>
function myFunction(){
  var x = document.getElementsByClassName("single_bottom_testi");
  for(let i = 0; i < x.length; i++){
    x[i].classList.add("displayBlock"):
  }
}
</script>

推荐阅读