Как получить элемент по идентификатору на основе ссылки href с jQuery? - PullRequest
3 голосов
/ 31 марта 2012

Я пытаюсь скрыть скрытый элемент, основываясь на атрибуте href нажатой ссылки, но не могу понять, как, я попробовал это:

http://jsfiddle.net/vengiss/Zhn2W/

Но по какой-то причине $(textBlock) просто возвращает пустой объект.

Заранее спасибо!

Ответы [ 4 ]

1 голос
/ 31 марта 2012

Проблема заключалась в том, что вы забыли добавить первый $ в вызове jQuery ready.Это необходимый вам JavaScript:

$(function(){
    $('#links a').on('click', function(e) {
        e.preventDefault();

        // Fade out any visible text blocks
        $('#text-blocks div').fadeOut();

        // Fade in required one
        $($(this).attr('href')).fadeIn(); 

    });        
});​

jsFiddle - здесь .

1 голос
/ 31 марта 2012

Проблема с кодом, который вы сейчас используете, довольно проста.Селектор, который вы используете, чтобы найти div для исчезновения:

$(this).find('div')

Но в этом контексте this относится к элементу, по которому щелкнули.Просто измените этот селектор на:

$('#text-blocks').find('div')

И он должен работать.

РЕДАКТИРОВАТЬ: Что-то еще, что я заметил относительно вашей функции оболочки.Вы пропустили круглые скобки open-close, поэтому ни один из ваших кодов никогда не запускается.В качестве альтернативы, чтобы запустить его на готовом документе, вы можете добавить jQuery (или $) к самому началу кода.

1 голос
/ 31 марта 2012

Вы используете this (который ссылается на привязанный якорь) вместо намеченного элемента для поиска текстовых блоков.Попробуйте вместо этого использовать селектор #text-blocks > div:

// Fade out any visible text blocks
$('#text-blocks > div').fadeOut('normal', function() {
  // Fade in selected text block
  $(textBlock).fadeIn(); 
});    

Это рабочий файл jsfiddle .

РЕДАКТИРОВАТЬ:

Также вы можете не добавлять и не добавлять уже выбранный элемент, и в этом случае используйте .not():

// Fade out any visible text blocks
$('#text-blocks > div').not(textBlock).fadeOut('normal', function() {
  // Fade in selected text block
  $(textBlock).fadeIn(); 
});

Это рабочий jsfiddle этого издания.

1 голос
/ 31 марта 2012

Попробуйте:

$('a[href="ABC"]').fadeIn();

Документацию по селектору можно найти по адресу http://docs.jquery.com/Selectors

Для атрибутов:

= точно равно

! = Не равно

^ = начинается с

$ = заканчивается с

* = содержит

Выберите , href которого заканчивается строкой

...