jqueryイベント処理のリンク

jqueryを使い始める前に、ここにある公式サイトのチュートリアルに従ってください。 http://docs.jquery.com/How_jQuery_Works#jQuery:_The_Basics jqueryイベント処理のリンク

私は、「文書のコードを起動する」というセクションにあります。あなたが気づくならば、彼らは2つの例を提供します。アラートボックスがjqueryサイトに移動する前にポップアップする場所と、アラートボックスによってサイトに移動できない場所があります。

リンクが2つあるとします。アラートボックスが表示され、「OK」をクリックするとjqueryのサイトに進み、アラートボックスは表示されますが、jqueryのサイトに行くことはできません。私はちょうど異なったリンクのための異なった応答を把握することができるようになりたいと思う。私はそれに何らかのIDを付ける必要がありますか？

ここにコードがあります。アンカーへの追加の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>

編集。みんなありがとう、それは動作します。

出典

2012-05-02 user1104854

はい、今は、ページ上のすべての「」タグに 'click（）'を付けています。セレクタを使用して必要な ''をターゲットにする必要があります。これはそれぞれの ''に別のクラス、つまりidを与えることで可能です。 – Nadh

はい、IDを使用すると、アンカーを参照する最も直接的な方法です。

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

あなたのイベントを結合するときには、実際のリンクと、このIDを基準にIDを割り当てる必要があります

$("#anchor1").click(function(event){ 
    alert("Thanks for visiting!"); 
    event.preventDefault(); 
});

出典

2012-05-02 14:21:31

することができます。実際の例については、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-02 14:26:13 marcok

良い答え。私には小さな問題が1つあります。セレクタでタグ名のIDを修飾するべきではありません（ "a＃link2"）。 idは一意でなければならないため、修飾する必要はありません。また、 'a'を最初に置くとクエリが遅くなります。 – hellslam

固定、ありがとう@hellslam！ – marcok

はい、$('a')は、すべてのアンカー要素（「A 'タグ）を選択。セレクタをさらに指定せずにすべてを選択した場合、イベントハンドラはそれらすべてにフックされます。だから、あなたが他の回答で述べたように、IDを追加することによって、別のアンカーを選択することができます。

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

のように、

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

ことができますまたはあなたはA-タグの他の属性を使用して選択範囲を絞り込むことができREF-属性またはデータ - *属性、そのよう：

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

は

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

012することができます

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

を可能

と

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

あなたも

$("a[href^='http://']").click(...);

出典

2012-05-02 14:29:33 David

これらのセレクタは素晴らしいですが（便利な場合もありますが）、新しいjQueryユーザーを混乱させる可能性があります。 idセレクタの使用例を含めると、私はあなたにアップアップします:) – Ktash

は、完全性のためにID付きの例を追加しました。これは最も簡単な解決策であり、既に別の答えで述べられています – David

はいのような彼らのプロトコルによって、すべての外部リンクを選択することができます。

今すぐ、$('a')は、ページ上のすべての要素を把握し、<a>要素です。必要なのは、2つの要素を区別して要素の1つのみを取得する方法です。これを行うには多くの方法がありますが、一番簡単な方法はIDを追加することです。 IDは、ページ上で一意の識別情報として動作し、単一の要素のスタイル、操作、および/または取得を行います。

そこから、@Sam Tysonの答えで述べたように、あなたは以下のjQueryのセレクタを使用することができます

$('#id1').click(

をこのjQueryのセレクタはID id1を使用し、指示するために使用され#、とその前あなたはそのIDで何かを探しています。

これを行う別の方法は、クラスを使用することです。たとえば、ページに複数のリンクがあって、次のページに進むのを防ぎたい場合は、クラス名を使用してそれらをまとめてグループ化し、同時にそれらをすべて処理することができます。 IDとは対照的に、クラスは、スタイルを設定、操作、または取り込めるように要素をグループ化するためのものです。あなたのリンクにクラスを追加すると、次の操作を実行できるようになる：

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

これは、クラス名do_not_follow_linkを持つすべてのリンクを見つけ、それらがリンクされているページへの継続からそれらを停止します。

今、jQueryでセレクタを使用すると、もっと多くの方法がありますが、これは今心配すべき重要なものです。

出典

2012-05-02 14:30:09 Ktash

jqueryイベント処理のリンク

答えて

関連する問題