Question

我不确定如何正确授权我的问题，但问题出在这里：

我在页面上有许多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以便在链接点击时切换它们的有效方法是什么？逐个编码它们不是一个好选择，因为页面上可能有太多的元素。

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

Answer 1

由于你的触发器有一个共同的类trigger，你可以这样做：

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

Answer 2

您可以将数据属性（例如，data-div-id）添加到包含相关div标识的链接标记中：

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

然后你就这样触发它：

$('a.trigger').click(function(){
    $('div#' + $(this).data('divId')).toggle();
}

如何使用jQuery将元素与触发器链接相关联？

2 个答案: