如何使用 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 上添加它，selecting 所有 buttons/divs 我想添加点击侦听器，然后附加它。

为此，您可以使用 .getElementsByClassName()（您也可以使用 querySelectorAll()）select 所有这些元素，并将元素保存在变量中，然后循环所有元素并附上onclick功能。

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

查看下面的代码以了解主要思想。

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>

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

How to make multiple buttons work independently using one function in java script?

html

javascript

button

show-hide