4

私はjqueryを使い始めており、ここにある公式Webサイトのチュートリアルに従っています。 http://docs.jquery.com/How_jQuery_Works#jQuery:_The_Basics

DocumentReadyでコードを起動するというラベルの付いたセクションにいます。お気づきの方もいらっしゃると思いますが、2つの例があります。1つは、jqueryサイトに移動する前にアラートボックスがポップアップする場所で、もう1つは、アラートボックスがサイトにアクセスできないようにする場所です。

2つのリンクが必要だとします。1つはアラートボックスが表示され、[OK]をクリックすると、jqueryのサイトに進みます。もう1つは、アラートボックスが表示されますが、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(...);

または、ref-attributeやdata- *属性など、a-tagの他の属性を使用して、選択を絞り込むことができます。

<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>。必要なのは、2つを区別して、要素の1つだけを取得する方法です。これを行うには多くの方法がありますが、最も簡単なのはIDを追加することです。IDは、ページ上で一意のIDとして機能し、単一の要素のスタイル設定、操作、および/または取得を行います。

そこから、@ Sam Tysonの回答で述べられているように、次のjQueryセレクターを使用できます。

 $('#id1').click(

このjQueryセレクターはIDid1を使用し、その前に#。を付けます。これは、そのIDを持つものを探していることをjQueryに通知するために使用されます。

これを行う別の方法は、クラスを使用することです。たとえば、次のページに進まないようにしたいページに複数のリンクがある場合は、クラス名を使用してそれらをグループ化し、すべてを同時に処理できます。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 に答える