javascript - 我怎样才能使这个 jquery 函数专注于只处理我想要的链接，而不是使用页面上的任何 ？

Question

我遇到的问题是我设置了一个 jquery 函数来运行一些显示和隐藏 div 框的链接。这些盒子中的每一个都有一个链接来隐藏自己。这个功能很好用。但是，页面上的其他链接都不会到达它们需要去的地方。如果在此系统之外单击链接，它只会关闭当前打开的任何 div 框。

这是一个带有功能设置的 jsfiddle，以及一个应该转到 Google 的“额外链接”，但正如您将看到的，它只会关闭所有打开的 div 框。

这是 HTML:

<a href="#" data-box="box1">Click Me1</a>
<a href="#" data-box="box2">Click Me2</a>
<a href="#" data-box="box3">Click Me3</a>

<div id="hiddendivs">
<div id="box1">
    <a href="#" data-box="box1">Close Me1</a>
</div>

<div id="box2">
    <a href="#" data-box="box2">Close Me2</a>
</div>

 <div id="box3">
    <a href="#" data-box="box3">Close Me3</a>
</div>
</div>


<p class="ptag"><a href="http://www.google.com" target="_blank">Extra Link</a></p>

这里是 jquery:

$('a').click(function (e) {
e.preventDefault();
$('#hiddendivs div').not($('#'+$(this).data("box"))).fadeOut(1000);
$('#' + $(this).data("box")).fadeToggle(1000);
})

这是 jsfiddle:http://jsfiddle.net/f6g3dnet/7/

感谢您提供的任何帮助。

Answer 1

您只能定位具有 data-box 属性的链接:

$('a[data-box]').click(function (e) {
e.preventDefault();
$('#hiddendivs div').not($('#'+$(this).data("box"))).fadeOut(1000);
$('#' + $(this).data("box")).fadeToggle(1000);
})

http://api.jquery.com/has-attribute-selector/