jQuery的不點擊

Question

我有一個列表

HTML

<a href="#" class="chosenflag" data-flag="de"><img class="flag" src="" alt="" /></a> 
<ul class="choices"> 
     <li><a href="#" data-flag="en"><img class="flag" src="/img/flag/United Kingdom.png" alt="" /></a></li> 
     <li><a href="#" data-flag="de"><img class="flag" src="/img/flag/Germany.png" alt="" /></a></li> 
     <li><a href="#" data-flag="es"><img class="flag" src="/img/flag/Spain.png" alt="" /></a></li> 
     <li><a href="#" data-flag="fr"><img class="flag" src="/img/flag/France.png" alt="" /></a></li> 
     <li><a href="#" data-flag="it"><img class="flag" src="/img/flag/Italy.png" alt="" /></a></li> 
    </ul> 

我試圖代碼jQuery中的能力，只允許一切，但名單元素的動作這就是數據標誌匹配.chosenflag類

我嘗試以下，但無濟於事

的jQuery

var compareflag = $('.chosenflag').attr('data-flag'); 
$('.choices li:not(.chosenflag[data-flag="'+compareflag+'") a').click(function(e){ 
     e.preventDefault(); 
     console.log("clicked"); 
    }); 

jsFiddle 可能有人也許幫助我與我的代碼？

Answer 1

在事件處理程序的聲明過程中，您不能使用變量，因爲它將使用賦值的值，然後永遠不會更改 - 它將在以後始終查找相同的內容。相反，請在內部比較事件處理程序。這是很難解釋我的意思，但這裏的代碼和一個工作環節...

$(".choices li a").click(function(e){ 
    var compareflag = $(".chosenflag").data("flag"); 
    if ($(this).data("flag") != compareflag) { 
     e.preventDefault(); 
     alert("clicked"); 
    } 
});​ 

jsFiddle link

Answer 2

var compareflag = $('.chosenflag').attr('data-flag'); 

$('.choices li a:not([data-flag="'+compareflag+'"])').click(function(e){ 
    alert("clicked"); 
    e.preventDefault(); 
}); 

工作實例：http://jsfiddle.net/XCQdR/10/

Answer 3

您可以使用:has過濾器：

'.choices li:has(a[data-flag="'+compareflag+'"])' 

Example at JS Fiddle.

Answer 4

正如在另一個答案中提到的，你缺少]，但你的選擇器也是錯誤的。您使用的是not選擇上li，並傳遞.chosenflag類，它應該是在a，沒有.chosenflag類，如：

$('.choices li a:not([data-flag="' + compareflag + '"])') 

Working fiddle