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, но я теряюсь, где именно это добавить. Я попытался добавить в нескольких местах, но он остановил работу кода.

Спасибо за помощь.

Gee

Answer 1

Поскольку идентификатор содержится в атрибуте 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); 
    }); 
});