0

私はリストを持っています

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でコード化しようとしていますが、data-flagが.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 誰かが私のコードを手伝ってくれませんか?

4

4 に答える 4

3

イベントハンドラーの宣言中に変数を使用することはできません。変数は割り当ての値を使用し、その後は変更されないためです。後で常に同じものを探します。代わりに、イベント ハンドラー内で比較を行います。私が何を意味するのかを説明するのは難しいですが、ここにコードと作業リンクがあります...

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

jsFiddle リンク

于 2012-11-14T10:24:15.250 に答える
0 
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/

于 2012-11-14T10:25:49.907 に答える
0

:hasフィルタを使用できます。

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

JSFiddleでの例。

于 2012-11-14T10:26:11.693 に答える
0

別の回答で述べたように、あなたは行方不明です]が、セレクターも間違っています。notでセレクターを使用していて、クラスをそれにli渡している場合は、クラスなしで、にある必要があります。例：.chosenflaga.chosenflag

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

ワーキングフィドル

于 2012-11-14T10:27:19.273 に答える