Question

我有大量的按钮都用于在它之前显示div，我的问题是没有20个不同的javascript函数，它们都做同样的事情，是否可以用一个？默认情况下，我在CSS中将显示设置为none。

HTML：

<div class="col-lg-6 event-title">
    <span>Special Olympics Unified Snowboarding Final</span>
    <dd>SLOPESTYLE</dd>

    <div id ="#dropdown">
        <h6>2016 RESULTS</h6>
        <p>
         GOLD - Chris Klug & Henry Meece<br>
         SILVER - Danny Davis & Zach Elder<br>
         BRONZE - Hannah teter & Daina Shilts
         </p>
    </div>
</div>

<div class="col-lg-1">
    <button type="button" id = "#drop-button" class="btn btn-default btn-lrg">&#x25BC</button>
</div>

<div class="col-lg-6 event-title">
    <span>Special Olympics Unified Snowboarding Final</span>
    <dd>SLOPESTYLE</dd>

    <div id ="#dropdown1">
        <h6>2016 RESULTS</h6>
        <p>
         GOLD - Chris Klug & Henry Meece<br>
         SILVER - Danny Davis & Zach Elder<br>
         BRONZE - Hannah teter & Daina Shilts
         </p>
    </div>
</div>

<div class="col-lg-1">
    <button type="button" id = "#drop-button1" class="btn btn-default btn-lrg">&#x25BC</button>
</div>

JavaScript的：

document.getElementById("#drop-button").addEventListener("click", function(){
    document.getElementById("#dropdown").style.display="block";
});

document.getElementById("#drop-button1").addEventListener("click", function(){
    document.getElementById("#dropdown1").style.display="block";
});

Answer 1

你为什么使用id？ ID是唯一的，对于多个，您应该使用类。

Answer 2

HTML：

<div class="col-lg-1">
    <button type="button" class="drop-button btn btn-default btn-lrg">&#x25BC</button>
</div>

JavaScript的：

var buttons = document.getElementsByClassName("drop-button");
for(var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", function(){ this.style.display="block"; });
{

Answer 3

你可以写一个这样的函数：

function yourfunction(id1, id2) {
    document.getElementById(id1).addEventListener("click", function(){
        document.getElementById(id2).style.display="block";
    });
}

并在您的脚本中调用它：

yourfunction("#drop-button", "#dropdown");
yourfunction("#drop-button1", "#dropdown1");
// more ids

Answer 4

创建外部div

<div id='container'> 
 your other divs
</div>

然后将一个查询选择器分配给div容器，并指定要跟踪的事件，如点击，更改等。

var g = {};

g.formClass = function()
{
   /*call this method with <body onload = g.c.assignEventListeners();>*/
 this.assignEventListners = function()
 {
  /*event listener for all links in the container div*/
container = document.querySelector("#container");
container.addEventListener("click", g.c.containerRouter, false);
container.addEventListener("change", g.c.containerRouter, false);
};

将事件发送到路由器，以检测div容器中触摸的内容并执行特定代码

以下是一些示例，说明如何监控事件并决定您想要做什么。

this.containerRouter = function (e) 
{
  if (e.target !== e.currentTarget) 
  {
    /*Reference the event's target id*/
    if (e.target.id.indexOf('drop-button')>-1)
      g.c.changeDisplay(e);

    /*Reference the event's target class along with the type of event*/
    if (e.target.classList[0]=='selMe' && e.type=='click')
      document.getElementById(e.target.id).select();
    if (e.target.classList[1]=='subMe' && e.type=='change')
      g.c.subTotHrs(e);
  }
  e.stopPropagation();
};

this.changeDisplay = function(e)
{
  /* 
  * Get a list of all <div> elements in the document with class="dropdown" 
  * store them in a array variable x
  */
  var x = document.querySelectorAll("div.dropdown"); 

  /*loop through the array and close all drop downs*/
  for (var i = 0; i < x.length; i++ )
    x[i].style.display="none"; 

  /*
  * use the .split( ) method to extract the button #
  * this puts the parts into an array you can reference
  */
  var divNum = e.target.id.split('drop-button');
  document.getElementById('#dropdown'+divNum[1]).style.display="block";

};

}
g.c = new g.formClass;

您可以从事件的目标中访问任何内容，例如id，class，value等。您可以评估发生的事件类型。您可以选择更多选项。

您可以将查询选择器分配给整个文档，或者将范围缩小到<tbody>节点，例如，如果您使用按钮或文本字段动态填充表，则可以使用此选项对其进行检查事件监听器

传递事件....（e）并且您的函数/方法/子例程可以使用它来获取或放置有用的信息。

在这个例子中，我将所有代码包装在一个全局对象中。您可以选择是否执行相同操作，只需更改对要执行的函数/方法的引用即可。我提供的不仅仅是为了展示一些可能性。

以下是您的具体问题所需的代码

HTML

<div id ='container'>
  <div class="col-lg-6 event-title">
    <span>Special Olympics Unified Snowboarding Final</span>
    <dd>SLOPESTYLE</dd>

    <div id ="#dropdown1">
      <h6>2016 RESULTS</h6>
      <p>
        GOLD - Chris Klug & Henry Meece<br>
        SILVER - Danny Davis & Zach Elder<br>
        BRONZE - Hannah teter & Daina Shilts
      </p>
    </div>
  </div>

  <div class="col-lg-1">
    <button type="button" id = "#drop-button1" class="btn btn-default btn-lrg">&#x25BC</button>
  </div>
</div>

的javaScript

function assignEventListners(){
  container = document.querySelector("#container");
  container.addEventListener("click", containerRouter, false);
}

function containerRouter(e) {
  if (e.target !== e.currentTarget)
    if (e.target.id.indexOf('drop-button')>-1)
      changeDisplay(e);

    e.stopPropagation();
}

function changeDisplay(e)
{
  var x = document.querySelectorAll("div.dropdown"); 
  for (var i = 0; i < x.length; i++ )
    x[i].style.display="none";

  var divNum = e.target.id.split('drop-button');
  document.getElementById('#dropdown'+divNum[1]).style.display="block";
};

请注意代码中的更改。为了解释“containerRouter”的用途，我将之前的代码移出该方法并创建了一个名为“changeDisplay”的新方法

一切如何运作：

将eventListner添加到外部div“Container”中，因此只要用户在容器内部执行某项操作，就会触发事件。
eventListner将您指定的事件的所有请求（如click，change，mouseover等）发送到一个方法“containerRouter”。当它执行此容器时，整洁的部分接收一个参数“e”。 “e”就是这个事件。它附带了很多你可以使用的东西。
“containerRouter”应该只包含将已触发事件定向到适当方法/函数的代码。否则，您可能还有一些独立的事件监听器，如您在原始帖子中所述。
在“containerRouter”中，您可以评估“e”。什么样的事件。它具体来自哪里。是否有与生成事件的对象关联的内容。这里有几个例子。当您离开文本字段时，可以使用“更改”事件。您可以检查并验证内容。或者，如果某人将鼠标悬停在页面的某个区域上，您可以阅读该对象的innerHTML并显示它，无论如何都会改变它。

具体来说，我们在您的示例中做了什么，我们在事件的目标ID中查找了一个子字符串“drop-down”。目标是像按钮一样生成事件的对象。你给每个按钮一个唯一的ID。但也有一部分ID都是一样的，所以我们利用了这一点。使用.indexOf的子串搜索方法（'drop-button'）＆gt; -1，我们说如果条件为真，它必须是一个按钮。你可以google indexOf。所以去做点什么吧。在这种情况下，请更改屏幕的显示。

请注意，当我们调用方法/函数changeDisplay时，我们发送了“e”，因为它仍然有我们可以使用的东西。

在changeDisplay方法中，我们要做的第一件事是使用方法.querySelecorAll（）。它为我们提供了一个包含我们页面上与搜索条件相匹配的所有对象的数组，<div>具有一个名为“dropdown”的类。这使我们无需循环浏览页面上的对象来收集信息。所以现在我们可以快速参考所有这些对象。一个简单的循环通过并关闭它们，即使它们已经关闭。

接下来，我们必须弄清楚哪些按钮被按下了。这就是“e”派上用场的地方。我们只提取e.target.id的id值，然后解剖它以找到数字。我们将数字附加到我们想要弹出的<div id="dropdown">上，并按照我上面的说明完成它。

多个具有相同名称的按钮显示不同的div

4 个答案: