4

我开始使用 jquery 并按照此处找到的官方网站上的教程进行操作。 http://docs.jquery.com/How_jQuery_Works#jQuery:_The_Basics

我在标有在文档就绪时启动代码的部分。如果您注意到，他们提供了两个示例。一个是在将您带到 jquery 站点之前弹出一个警报框，另一个是警报框阻止您访问该站点。

假设我想要两个链接。一个出现警告框并单击“确定”后，它会继续访问 jquery 的站点，另一个出现警告框但阻止您访问 jquery 的站点。我只想能够找出不同链接的不同响应。我需要给它某种ID吗？

这是代码。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
<title>Demo</title>
  </head>
  <body>
<script src="jquery.js"></script><br/>
<a href="http://jquery.com/" id="1">jQuery</a><br/> <!--first link: will display message and then proceed to site -->
<script>
 $(document).ready(function(){
    $("a#1").click(function(event){
      alert("Thanks for visiting!");
    });
  });
</script>
<a href="http://jquery.com/" id="2">jQuery</a> <!-- second link: message appears and does not continue to site -->
<script>
   $(document).ready(function(){
      $("a#2").click(function(event){
        alert("As you can see, the link no longer took you to jquery.com"); 
        event.preventDefault();
      });
    });
</script>

编辑 - 将 id 添加到锚点。谢谢你们，它的工作原理。

4

4 回答 4

8

是的，使用 id 是引用锚点的最直接方式。

<a id="anchor1" href="..">anchor 1</a>

允许

$("#anchor1").click(function(event){
   alert("Thanks for visiting!");
   event.preventDefault();
});
于 2012-05-02T14:21:31.157 回答
5

是的，$('a')选择所有锚元素（“a”标签）。如果您全部选择它们，就像您没有进一步指定选择器一样，事件处理程序将与所有它们挂钩。因此，您可以通过添加 id 来选择不同的锚点，如另一个答案中所述：

<a id="anchor1" href="..">anchor 1</a>

允许

$('#anchor1').click(...);

或者，您可以使用 a-tag 的其他属性（如 ref-attribute 或 data-* 属性）来优化选择，如下所示：

<a rel="preventme" href="..">anchor 1</a>

允许

$('a[rel="preventme"]').click(...);

和

<a data-mode="disable-link" href="..">anchor 2</a>

这使得

$('a[data-mode="disable-link"]').click(...)

你甚至可以通过他们的协议选择所有外部链接，比如

$("a[href^='http://']").click(...);
于 2012-05-02T14:29:33.887 回答
3

是的。

现在，$('a')抓取页面上的所有<a>元素。您需要的是一种区分两者的方法，以仅抓住其中一个元素。有很多方法可以做到这一点，但最简单的方法是添加一个 ID。ID 充当页面上的唯一标识以设置样式、操作和/或抓取单个元素。

从那里，如@Sam Tyson的回答所述，您可以使用以下 jQuery 选择器：

 $('#id1').click(

这个 jQuery 选择器使用 ID id1，并在其前面加上#，用于告诉 jQuery 您正在寻找具有该 ID 的内容。

另一种方法是使用类。例如，如果您希望阻止页面上有多个链接继续到下一页，则可以使用类名将它们组合在一起以同时处理它们。类，而不是 ID，用于对元素进行分组，以便可以对它们进行样式设置、操作或抓取。向您的链接添加一个类将允许您执行以下操作：

$('.do_not_follow_link').click(function (e) {
    e.preventDefault();
});

这将找到所有具有类名的链接，do_not_follow_link并阻止它们继续访问它们链接到的页面。

现在，在 jQuery 中使用选择器，有很多方法可以做到这一点，但这些是您现在应该担心的重要方法。

于 2012-05-02T14:30:09.227 回答
1

在绑定事件时，您确实应该为链接分配一个 ID 并引用此 ID。有关工作示例，请参阅此jsFiddle 。

<a href="http://jquery.com/" id="link1">jQuery</a><br/> <!--first link: will display message and then proceed to site -->
<a href="http://jquery.com/" id="link2">jQuery</a> <!-- second link: message appears and does not continue to site -->

然后绑定事件：

$(document).ready(function() {
    $("#link1").click(function(event) {
        alert("As you can see, the link no longer took you to jquery.com");
        event.preventDefault();
    });

    $("#link2").click(function(event) {
        alert("Thanks for visiting!");
    });
});​
于 2012-05-02T14:26:13.053 回答