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);
    });
});

該腳本的作用（或最終應該做的）取決於所單擊的鏈接（請參見HTML代碼）在一個隱藏的div（＃box1，＃box2等）中淡入淡出。 我添加了#showtext div來查看屬性是否正確存儲。

但是，該腳本只能與第一個鏈接中的第一個href屬性一起使用。 我知道$（'a'）。attr（'href'）僅獲取第一個'a'元素的屬性，我需要在每個地方添加.each，但是我不知道該在哪里添加它。 我嘗試在幾個地方添加，但是它停止了代碼的工作。

謝謝你的幫助。

e

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); 
    }); 
});