如何使用 jQuery 基于链接的 href 按 ID 获取元素？答案

【问题标题】：How to get an element by ID based on a link's href with jQuery?如何使用 jQuery 基于链接的 href 按 ID 获取元素？
【发布时间】：2012-04-15 01:43:57
【问题描述】：

我正在尝试根据点击链接的href 属性淡入隐藏元素，但我不知道如何，我尝试了这个：

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

但由于某种原因，$(textBlock) 只返回一个空对象。

提前致谢！

【问题讨论】：

标签： jquery dom href fadein

【解决方案1】：

您正在使用this（指单击的锚点）而不是预期的元素来查找文本块。尝试改用#text-blocks > div 选择器：

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

这是它的working jsfiddle。

编辑：

此外，您可能希望避免淡入淡出已选择的元素，在这种情况下使用.not()：

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

这是此版本的working jsfiddle。

【讨论】：

很好，解决了这个问题，谢谢，现在我必须弄清楚为什么 div 有时会很快消失两次，有什么想法吗？我更新了你的小提琴，以更好地反映我实际使用它的方式jsfiddle.net/vengiss/Zhn2W/13

【解决方案2】：

试试这个：

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

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

对于属性：

= 完全相等

!= 不等于

^= 以
开头
$= 以
结尾
*= 是包含

Select <a> which href ends with some string

【讨论】：

不是真的试图淡入链接，而是 div，例如。如果我单击带有 href #text1 的链接，我想淡入 ID 为 text1 的 div。由于 href 已经包含 # 符号，我想我可以将它传递给 jQuery 函数来选择它:(

【解决方案3】：

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

$(this).find('div')

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

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

它应该可以工作。

编辑：关于您的包装器功能，我注意到了其他一些事情。您错过了末尾的开闭括号，因此您的任何代码都不会运行。或者，要让它在准备好的文档上运行，您可以在代码的开头添加 jQuery（或 $）。

【讨论】：

【解决方案4】：

问题是您忘记在 jQuery 就绪调用中添加第一个 $。这是您需要的 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 是here。

【讨论】：