HTML / Jquery：$（'a'）。attr（'href'）和.each？

Question

My questions regards HTML and Jquery.

I have some links in HTML code, something like this:

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

In my current JQuery script, I have the following code:

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

What this script does (or should do eventually) is fade in one of the hidden divs (#box1, #box2, etc) depending on what link (see HTML code) is clicked. I added the #showtext div to see of the attribute is being correctly stored.

The script works fine, however, only with the first href attribute that is found in the first link. I am aware that $('a').attr('href') grabs only the attribute of the first 'a' element and that I need to add .each somewhere, but I am lost as to where exactly to add this. I tried adding in several places but it stopped the code working.

Thank you for help.

Gee

Answer 1

Since the ID is contained in the href attribute and this is referring to the clicked element, you simply have to access its attribute:

$('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

Not that I have any experience with jQuery or anything (peronally I think it's for lazy programmers), but shouldn't you have something like:

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