如何将元素与 jQuery 的触发器链接相关联

How to associate elements with trigger links with jQuery?

本文关键字：触发器 链接 关联 jQuery 元素      更新时间：2023-09-26

我不确定如何正确命名我的问题，但问题是：

我在页面上有许多div 元素，并触发链接指向每个具有锚点 ID 的元素。这些元素将用作弹出窗口。

<a href="#pop1" class="trigger" id="t1">Show Popup #1</a>
<a href="#pop2" class="trigger" id="t2">Show Popup #2</a>
<a href="#pop3" class="trigger" id="t3">Show Popup #3</a>
<div id="pop1" class="popup">...content here...</div>
<div id="pop2" class="popup">...content here...</div>
<div id="pop3" class="popup">...content here...</div>

现在，将多个链接关联到div 以便在链接单击时切换它们的有效方法是什么？逐个编码不是一个好的选择，因为页面上可能有太多的elemens。

$("#t1").click(function(){
  $("#pop1").toggle();
});

由于触发器具有公共类trigger，因此您可以执行以下操作：

$(".trigger").click(function(){
    $(this.href).toggle(); // href is "#pop1", "#pop2", etc.
    return false; // prevent default action of anchor tag click
});
您可以将

数据属性（例如，data-div-id）添加到包含关联div id的链接标签中：

<a href="#pop1" class="trigger" id="t1" data-div-id="pop1">Show Popup #1</a>

然后你就像这样触发它：

$('a.trigger').click(function(){
    $('div#' + $(this).data('divId')).toggle();
}
相关文章：