Question

我有这个按钮标记元素

<button class="btn btn-link" type="button" onclick="contentDownloads()">
<img src="./downloads/content-textures.svg" width="120px" />
</button>

并具有javascript功能

      function contentDownloads() {
        var x = document.getElementById("vipDownloads");
        if (x.style.display === "none") {
          x.style.display = "block";
        } else {
          x.style.display = "none";
        }
      }

但是，将来我会添加更多按钮，并实现相同的功能。

这是包含ID的部分：

<div id="vipDownloads" class="collapse show" style="display: none;">     
<div class="card-body">
<h5 class="card-title">Map Pack v 1.8 <span class="caption-entry">by cWaLker</span> </h5>
<p class="card-text">
Aight Fellas,
Map Pack v 1.8 introduces some revived classics and under the radar stunners. <br>
<br> 1.7 went on a diet and dropped some restraining pounds.
For this nugget to work stable, you'd need to remove your own user folder first and then drop the User folder from the 1.8 bulk package.. it will serve you everything you need anyways ;-)<br>
<br> Have Fun Guys lets kick some flips!              
</p>
<a href="https://drive.google.com/open?id=1SNivhvHi-4PjPDy1tob-91HYs3x3R_z9" target="_blank"><button type="button" class="btn btn-outline-success">Download</button></a><br>           
</div>
</div>

您可以在此处看到我如何设计按钮和内容http://thpsblog.000webhostapp.com/downloads.html（主机上的CSS可能需要一段时间才能真正更新，可能包括一些白色）

该功能隐藏和取消隐藏内容。

我找到了一些解决方案，但是它们都是在jQuery中键入的，不幸的是，我不知道jQuery。

如何使此函数带有两个唯一的ID？

Answer 1

获取元素的ID即可切换函数的参数，并在调用函数时传递它。

function contentDownloads(id) {
  var x = document.getElementById(id);
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

<button class="btn btn-link" type="button" onclick="contentDownloads('vipDownloads')">
<img src="./downloads/content-textures.svg" width="120px" />
</button>

Answer 2

如果您不想在HTML中添加onclick事件，则可以创建一个vars数组并使用forEach循环。否则，您可以使用@Barmar的答案。

function contentDownloads() {
  var x = document.getElementById("vipDownloads");
  var y = document.getElementById("y");
  var z = document.getElementById("z");

  vars = [x,y,z]; // update this array when selected a new element

  vars.forEach(function(p){
      if (p.style.display === "none") {
    p.style.display = "block";
  } else {
    p.style.display = "none";
  }
  })
}

Answer 3

按照其他建议设置id参数或使用数据属性：

<button class="btn btn-link" type="button" onclick="contentDownloads(this)" data-downloadsid="vipDownloads">
<img src="./downloads/content-textures.svg" width="120px" />
</button>

function contentDownloads(element) {
        var x = document.getElementById(element.dataset.downloadsid);
        if(x == null) return;
        if (x.style.display === "none") {
          x.style.display = "block";
        } else {
          x.style.display = "none";
        }
   }

Answer 4

您可以使用类查询元素并对其进行迭代

<div class="download-element">Element 1</div>
<div class="download-element">Element 2</div>
<div class="download-element">Element 3</div>

<button class="btn btn-link" type="button" onclick="contentDownloads()">
<img src="./downloads/content-textures.svg" width="120px" />
</button>

function contentDownloads() {
    document.querySelectorAll('.download-element')
        .forEach(element => {
            if(element.style.display === "none") {
                element.style.display = "block";
            } else {
                element.style.display = "none";
            }
        })
}

如何使一个JavaScript函数控制两个HTML ID？

4 个答案: