如何區分jquery中的鏈接？

Question

當我點擊example4中的「Google」鏈接時，我收到了2條警告消息[它也顯示了alert3消息]。請給出一個解決方案，嘗試區分example4中的鏈接，但沒有結果。我收到2條警報消息。

這段代碼有什麼問題，我是jquery世界的新手。

jQuery代碼：

//Example 03 - Prevent Default Action of HTML Element 
$(document).ready(function(){ 
    $("a").click(function(e){ 
     e.preventDefault(); 
     alert("Example 3 :: The default action of anchor element has been prevented using Jquery"); 
    }); 
}); 

    //Example 04 - Is Default Action Prevented of HTML Element 
    $(document).ready(function(){ 
     $("a.checkaction").click(function(event){ 
      event.preventDefault(); 
      alert("Example4 :: Is default action prevented of anchor <a>element :: "+event.isDefaultPrevented()); 
    }); 
}); 

HTML代碼：

<!-- Jquery example 03 - Prevent default behavior of HTML element using Jquery --> 
<h1 class="header">Example 3 - Prevent default behavior of HTML Element</h1> 
<a href="http://www.facebook.com">Facebook</a> 

<!-- Jquery example 04 - How to check whether the default action oh html is prevented or not using jquery --> 
<h1 class="header">Example 4 - How to check whether the default action oh html is prevented or not</h1> 
<a href="http://www.google.com" class="checkaction">Google</a> 

Answer 1

請嘗試以下操作。

請注意，你只需要包裝在一個$document.ready()功能的jQuery函數。另外，當您單擊示例4時您收到兩個彈出窗口，因爲您將jQuery選擇器設置爲適用於所有anchors。我給anchor添加了一個example-3類，並修改了js來調用它。我還使用return false;來防止默認操作，與您的方式相反。清潔，並在這種情況下做同樣的事情。

JQUERY：

$(document).ready(function(){ 

    //Example 03 - Prevent Default Action of HTML Element 
    $("a.example-3").click(function(){ 
     alert("Example 3 :: The default action of anchor element has been prevented using Jquery"); 

     return false; 
    }); 

    //Example 04 - Is Default Action Prevented of HTML Element 
    $("a.checkaction").click(function(){ 
     alert("Example 4 :: The default action of anchor element has been prevented using Jquery"); 

     return false; 
    )}; 
}); 

HTML：

<!-- Jquery example 03 - Prevent default behavior of HTML element using Jquery --> 
<h1 class="header">Example 3 - Prevent default behavior of HTML Element</h1> 
<a href="http://www.facebook.com" class="example-3">Facebook</a> 

<!-- Jquery example 04 - How to check whether the default action oh html is prevented or not using jquery --> 
<h1 class="header">Example 4 - How to check whether the default action oh html is prevented or not</h1> 
<a href="http://www.google.com" class="checkaction">Google</a> 

Answer 2

您可以在第一個處理程序更改爲：

$("a:not(.checkaction)").click(function(e){ 
    e.preventDefault(); 
    alert("Example 3 :: The default action of anchor element has been prevented using Jquery"); 
}); 

或者你可以結合兩種處理：

$("a").click(function(e) { 
    e.preventDefault(); 
    if ($(this).hasClass("checkaction")) { 
     ... 
    } else { 
     ... 
    } 
}); 

Answer 3

伴侶，實施例3將鉤在頁中的所有錨定元件（臉譜鏈路和谷歌鏈路）點擊功能。然後，例如4將鉤爲谷歌鏈接再點擊一下功能...所以谷歌的鏈接將被處理兩次

更改代碼如下：

jQuery代碼：

//Example 03 - Prevent Default Action of HTML Element 
$(document).ready(function(){ 
    $("a[name=fb]").click(function(e){ 
     e.preventDefault(); 
     alert("Example 3 :: The default action of anchor element has been prevented using Jquery"); 
    }); 
}); 

//Example 04 - Is Default Action Prevented of HTML Element 
$(document).ready(function(){ 
    $("a[name=gg]").click(function(event){ 
     event.preventDefault(); 
     alert("Example4 :: Is default action prevented of anchor <a>element ::  "+event.isDefaultPrevented()); 
}); 
}); 

的Html代碼：

<!-- Jquery example 03 - Prevent default behavior of HTML element using Jquery --> 
<h1 class="header">Example 3 - Prevent default behavior of HTML Element</h1> 
<a name="fb" href="http://www.facebook.com">Facebook</a> 

<!-- Jquery example 04 - How to check whether the default action oh html is prevented or not using jquery --> 
<h1 class="header">Example 4 - How to check whether the default action oh html is prevented or not</h1> 
<a name="gg" href="http://www.google.com" class="checkaction">Google</a> 

希望這是有道理的

利奧