如何创建 Javascript 函数来管理（Bootstrap）下拉菜单点击，而不是创建大量侦听器？

Posted 2023-05-08

【中文标题】如何创建 Javascript 函数来管理（Bootstrap）下拉菜单点击，而不是创建大量侦听器？

【英文标题】：How can I create a Javascript function to manage (Bootstrap) dropdown menu clicks instead of creating a large number of listeners?

【发布时间】：2021-10-15 01:52:56

【问题描述】：

我的项目有大量的下拉菜单。我目前的方案是为每个控件创建 jquery 侦听器，但是，单个函数可以完成相同的任务似乎是合理的。 请查看标记中的 onlick 事件。

<div class="input-group">
   <div class="input-group-prepend">
      <button id="PrimaryPhoneType" class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Type</button>
      <div id="ddlPrimaryPhoneType" class="dropdown-menu" onclick="ManageDDlClicks('ddlPrimaryPhoneType','tbPriPhoneType')">
         <a class="dropdown-item" href="#">Cell</a>
         <a class="dropdown-item" href="#">Home</a>
         <a class="dropdown-item" href="#">Work</a>
      </div>
   </div>
   <input type="text" class="form-control" id="tbPriPhoneType" runat="server">
</div>

当前监听方案：

  $('#<%=ddlPrimaryPhoneType.ClientID %> a').click(function () 
     $('#<%=tbPriPhoneType.ClientID %>').val($(this).html());
  );

提议的新功能：

function ManageDDlClicks(src, tgt) 
   let list = document.getElementById(src).getElementsByTagName('a');
   console.log(list);
   var selItem = list.???
   document.getElementById(tgt).value = selItem

调试和研究“列表”的内容，我在节点中看不到指向哪个项目被选中的任何内容。

【参考方案1】：

我不能 100% 确定我是否正确理解了您，但我会在标记中删除 onClick，并创建一个可以处理所有单击事件的事件处理程序。如果您的标记保持一致，则可以使用以下方法：

$('.dropdown-menu a').click(function () 
  $(this).parents('.input-group-prepend').next().val($(this).text())
);

https://jsfiddle.net/p03btj92/

当然有不同的方法：

$('.dropdown-menu a').click(function () 
  $(this).parents('.input-group').find('input[type="text"]').val($(this).text())
);

https://jsfiddle.net/af4ke57b/

使用基于 id 的选择器将要求您专门为要与之交互的每个元素编写代码。这个想法是改用$(this) 选择器，与可重用类结合使用。

您可以从那里使用DOM Traversal Methods 找到您要修改的元素。在这种情况下，使用了 parents、next 和 find。

【讨论】：

如此简单。非常感谢。