HTML/Jquery：$('a').attr('href') 和 .each？

Question

我的问题是关于 HTML 和 Jquery。

我在 HTML 代码中有一些链接，如下所示：

<a href="#box1">Item1</a>
<a href="#box2">Item2</a>
<a href="#box3">Item3</a>
etc.

在我当前的 JQuery 脚本中，我有以下代码：

$(function () {
    var targetbox = $('a').attr('href');
    $('a').click(function (event) {
        $(targetbox).fadeIn(2000);
        $('#showtext').text(targetbox);
    });
});

这个脚本所做的（或最终应该做的）是淡入隐藏的 div 之一（#box1、#box2 等），具体取决于单击的链接（参见 HTML 代码）。我添加了#showtext div 来查看属性是否被正确存储。

脚本工作正常，但是，只有在第一个链接中找到的第一个 href 属性。我知道 $('a').attr('href') 仅获取第一个 'a' 元素的属性，并且我需要在某处添加 .each ，但我不知道在哪里添加它。我尝试在几个地方添加，但它停止了代码工作。

感谢您的帮助。

哎呀

Answer 1

由于 ID 包含在 href 属性中，而 this 指的是被点击的元素，您只需访问其属性即可：

$('a').click(function (event) {
    $(this.getAttribute('href')).fadeIn(2000);
    // or: $($(this).attr('href')).fadeIn(2000);
});

Answer 2

$(function(){
   $("a").click(function(e){
       e.preventDefault(); //avoid applying the hash to the browser (unless desired)
       var href = $(this).attr("href").split("#")[1]; //IE6 will append the URL in front of the hash
       $("#" + href).fadeIn(2000);
   });
});

Answer 3

并不是说我对 jQuery 或任何东西有任何经验（我个人认为它是为懒惰的程序员准备的），但你不应该有类似的东西：

$(function(){ 
    $('a').click(function(event) { 
        var targetbox = $(this).attr('href'); 
        $(targetbox).fadeIn(2000); 
        $('#showtext').text(targetbox); 
    }); 
});