如何使用jQuery根据链接的href获取元素ID？

Question

我试图根据被点击链接的href属性淡入隐藏的元素，但是我无法弄清楚如何实现，我尝试了以下代码:http://jsfiddle.net/vengiss/Zhn2W/ ，但不知为何$(textBlock)返回一个空对象。事先感谢！

- Javier Villanueva

Answer 1

试试这个：

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

选择器文档可以在http://docs.jquery.com/Selectors找到。

对于属性：

= 表示完全相等

!= 表示不相等

^= 表示以...开头

$= 表示以...结尾

*= 表示包含...

选择 href 以某个字符串结尾的 <a> 元素

- msigman

---

并不是想淡化链接，而是div，例如，如果我点击href为“#text1”的链接，我希望淡入id为“text1”的div。由于href已经包含“#”符号，所以我认为可以将其传递给jQuery函数进行选择:( - Javier Villanueva

Answer 2

你目前使用的代码问题非常简单。你用来查找要淡出的div的选择器是：

$(this).find('div')

但在这种情况下，this 指的是被点击的元素。只需将选择器更改为：

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

它应该能够工作。

编辑： 我注意到有关您的包装函数还有其他事情。您忘记在末尾加上开闭括号，因此没有运行您的任何代码。或者，为了使其在文档准备就绪时运行，您可以将jQuery（或$）插入代码的开头。

- MartinAnsty

Answer 3

您正在使用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。

- Alexander

---

太好了，问题解决了，谢谢。现在我得想办法弄清楚为什么这个div有时会快速地淡入两次，你有什么想法吗？我更新了你的fiddle以更好地反映我实际的使用情况http://jsfiddle.net/vengiss/Zhn2W/13/。 - Javier Villanueva

Answer 4

问题在于您忘记在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在这里。

- hohner