javascript - 使用 Jquery 变量来识别 div 类/Id

Question

我确信这个问题的答案很简单，我刚刚能够弄明白。

我有一个简单的点击功能，适用于被点击的列表中的任何链接。单击一个时，我希望它删除 div 上的一个类，该类与链接属性之一相关。例如:

// The link
<li><a href="#" title="example1">example1</a></li>

// The div
<div id="example1" class="selected"></div>

这是我尝试过的一种方法，但它不对:

$("ul.switcher a").click(function(e){
 e.preventDefault();
 $("#" + $(this().val).removeClass("selected");
});

任何帮助将不胜感激!如果有人也能告诉我 JavaScript 等同于这样做，那将是一个很好的奖励!

Answer 1

好吧，你很接近:

$("ul.switcher a").click(function(e){
 e.preventDefault();
 $("#" + this.title).removeClass("selected");
});

对于这类事情，HTML5 的“data-”属性约定非常方便。您可以按如下方式更改标记:

<li><a href="#" data-targetId="example1">example1</a></li>

然后在您的代码中您可以使用 jQuery“.data()”方法:

$("ul.switcher a").click(function(e){
 e.preventDefault();
 $("#" + $(this).data('targetId')).removeClass("selected");
});

该技术可让您避免“重载”其他属性，就像您对“title”所做的那样。 (当然，这不一定是坏事，但有时您可能希望“标题”有意义，因为它毕竟会在鼠标位于元素上时显示。)