java - 如何使用java脚本中的一个函数使多个按钮独立工作？

Question

如何制作更多这些按钮以便它们独立工作？我知道都是和id相关的，但是一个函数，多个id怎么用呢？

function showme(id) {
  var divid = document.getElementById(id);
  var clicky = document.getElementById("clicky");
  if (divid.style.display == 'block') {
    divid.style.display = 'none';
    clicky.innerHTML = 'MORE <i class="fa fa-arrow-down"></i>';
  } else {
    divid.style.display = 'block';
    clicky.innerHTML = 'LESS <i class="fa fa-arrow-up"></i>';
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<i>Click on more. I want to have two buttons, which work independently.</i><br>

<div class="tp-caption rev-btn rev-hiddenicon  rs-hover-ready rev-mre-btn" onclick="showme('widget');" href="javascript:;" id="clicky">MORE 
  <i class="fa fa-arrow-down"></i>
</div>

<div id="widget" style="display:none;">
  TEXT 1
</div>

Answer 1

首先，我将删除您在 HTML 中添加的 onclick 侦听器，这不是一个好习惯。我会将它添加到 JS 中，选择我想要添加点击侦听器的所有按钮/div，然后附加它。

为此，您可以使用.getElementsByClassName()（也可以使用querySelectorAll()）选择所有元素，并将元素保存在变量中，然后循环所有元素并附加onclick函数。

函数上下文 (this) 将是单击的按钮/div，知道在函数内部您可以找到图标和包含的 div（我将 div 移到里面是因为它更容易找到它并知道哪个div 应该被切换）。有了内部 div 和图标后，现在由您来管理 div 的打开/关闭和图标转换...

看看下面的代码，看看主要思想。

var buttons = document.getElementsByClassName("button-open-container");
for (var i = 0; i < buttons.length; i++){
  buttons[i].onclick = showme;
}

function showme(ev) {   
  var spanText = this.querySelector(".my-text");
  var childDiv = this.querySelector(".my-container");  
  var icon = this.querySelector(".my-icon");  
  
  if (childDiv.style.display == "none"){
    childDiv.style.display = "block";
    icon.className = "my-icon fa fa-arrow-up";
    spanText.innerText = "LESS"
  }
  else{
    childDiv.style.display = "none";
    icon.className = "my-icon fa fa-arrow-down";
    spanText.innerText = "MORE";
  }    
}

.button-open-container{
  display: inline-block;
  margin: 8px;  
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<i>Click on more. I want to have two buttons, which work independently.</i><br>

<div class="tp-caption rev-btn rev-hiddenicon rs-hover-ready rev-mre-btn button-open-container">
  <span class='my-text'>MORE</span>
  <i class="my-icon fa fa-arrow-down"></i>
  <div class='my-container' style="display:none;">
    TEXT 1
  </div>
</div>

<div class="tp-caption rev-btn rev-hiddenicon rs-hover-ready rev-mre-btn button-open-container">
  <span class='my-text'>MORE</span>
  <i class="my-icon fa fa-arrow-down"></i>
  <div class='my-container' style="display:none;">
    TEXT 2
  </div>
</div>