如何使用 jQuery 从单击的链接中获取元素的#id？答案

【问题标题】：How does one to get the #id of an element from a clicked link using jQuery?如何使用 jQuery 从单击的链接中获取元素的#id？
【发布时间】：2011-08-25 02:50:50
【问题描述】：

这里是 jQuery/javascript 的新手并寻求一些帮助。我正在编写一个带有简单导航菜单的网站。它是这样工作的。用户单击菜单中的链接，该链接被设置为“活动”颜色，并且相应的部分从隐藏设置为可见（当文档加载时，所有部分都设置为隐藏）。当用户单击另一个链接时，该链接设置为活动颜色，其他链接设置为默认颜色，任何可见部分都设置为隐藏，相关部分设置为可见。这工作得很好，但我使用了单个元素，它非常难看，有很多重复。我正在重写代码以使用 .classes 并使用更少的重复代码更加灵活。

我的问题是：如何告诉它要显示哪个部分？

用户点击a.linkfornavigation，颜色被设置，section.blah被设置为隐藏，section#thisiswhatyouwant被设置为可见。但是我如何告诉 a.linkfornavigation 它应该指向哪里呢？每个部分都有一个唯一的#id（我猜他们点击的链接也可以）但是我如何从点击的链接中获取相关链接部分的#id？

非常感谢任何帮助。

HTML：

<!DOCTYPE html>
<html>     
  <head>
    <link rel="stylesheet" href="css/linkthinger-hybrid.css" />
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/linkthinger-hybrid.js" type="text/javascript"></script>
  </head>

  <body>

    <section id="links">
      <a class="thinger" href="#">Thing One</a>
      <a class="thinger" href="#">Thing Two</a>
      <a class="thinger" href="#">Thing Three</a>
      <a class="thinger" href="#">Thing Four</a>
      <a class="thinger" href="#">Thing Five</a>
    </section>

    <section id="things">
      <section id="thingone"   class="thing">I am thing one.</section>
      <section id="thingtwo"   class="thing">I am thing two.</section>
      <section id="thingthree" class="thing">I am thing three.</section>
      <section id="thingfour"  class="thing">I am thing four.</section>
      <section id="thingfive"  class="thing">I am thing five.</section>
    </section>

  </body>

javascript：

    $(document).ready(function(){

//  Hides .thing class as soon as the DOM is ready.
//  $('section.thing').hide(0);

//  Highlight selected link & set all others to default.  
  $('#links a').click(function(){
    $(this).addClass('selected');
    $(this).siblings().removeClass('selected');
  });

//  Shows one section and hides all others on clicking the noted link.
  $('a.thinger').click(function() {
    $('section.thing').hide(0);
    $('#thingone').fadeIn('slow');
    return false;
  });

})

CSS：

a {
    color: darkgreen;
    }

.selected {
    color: red;
    }

section.thing {
    background-color: blue;
    }

【问题讨论】：

顺便说一句：jsfiddle.net 是一个很好的示例网站
您可以通过数组索引访问链接，就像您通过索引访问部分一样。

标签： javascript jquery

【解决方案1】：

为链接提供正确的href 值。在这种情况下，它将是元素的 ID：

<a class="thinger" href="#thingone">Thing One</a>
<a class="thinger" href="#thingtwo">Thing Two</a>
....

优点是点击链接会让浏览器跳转到相应的元素，即使禁用了 JavaScript。

然后你访问这个属性并将其用作 jQuery 的 ID 选择器：

$('a.thinger').click(function() {
    $('section.thing').hide(0);
    $($(this).attr('href')).fadeIn('slow');
    return false;
});

【讨论】：

是的！走了几分钟后，这正是我的想法！向后兼容性也使我免于下一个问题。感谢代码和 +1 让我觉得我可能已经掌握了这个窍门！
所以这是一个后续行动......如果我将链接包装在无序列表中，为什么这不起作用
- 第一件事
- 第二件事
我的猜测是标记时就这样他们不再是兄弟姐妹了？
@Don：你的意思是之前选中的链接没有被取消选中？是的，那是因为他们不是兄弟姐妹。你可以这样做：$(this).closest('ul').find('.selected').removeClass('selected').
是的，这就是我得出的结论。我能够使用 $(this).parent('li').siblings().find("a").removeClass('selected'); 让它工作与 .parent('li') 相比，使用 .closest('ul') 有什么优势？最接近的会提供更具体的选择吗？（虽然我正在切换到 .find(.'selected') 而不是 .find('a') 因为这似乎比 .find('a') 更有针对性）
另外，如果您愿意看一下，另一个难题...stackoverflow.com/questions/7324245/…

【解决方案2】：

要获取点击元素的 id，请执行以下操作：this.id

要告诉它要打开哪个部分，您可以添加一些data- 属性来确定它：

<section id="links">
  <a class="thinger" href="#" data-open="thingone">Thing One</a>
  <a class="thinger" href="#" data-open="thingtwo">Thing Two</a>
  <a class="thinger" href="#" data-open="thingthree">Thing Three</a>
  <a class="thinger" href="#" data-open="thingfour">Thing Four</a>
  <a class="thinger" href="#" data-open="thingfive">Thing Five</a>
</section>

JS：

  $('#links a').click(function(){
    $(this).addClass('selected');
    $(this).siblings().removeClass('selected');
    $('.thing').hide();
    $("#"+$(this).data('open')).show();
  });

小提琴演示：http://jsfiddle.net/maniator/sxrap/

【讨论】：

【解决方案3】：

改变这一行：

$('#thingone').fadeIn('slow');

到这里：

$('#things .thing').eq($(this).index('a.thinger')).fadeIn('slow');

之所以有效，是因为$(this).index('a.thinger') 返回单击的锚点的整数索引，而.eq(i) 返回一个 jQuery 对象，其中包含调用它的 JQuery 对象中的 ith 元素。

jQuery 文档：

【讨论】：

【解决方案4】：

alert($(this).attr('id'); 如果你忠于 jQuery

【讨论】：

OP 示例中的链接没有 ID。