Question

I have a list

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>

I’m trying to code in jQuery the ability to only allow an action on everything BUT list element thats data-flag matches the .chosenflag class

I tried the following but to no avail

jQuery

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

jsFiddle
Could someone maybe help me out with my code?

Answer 1

You can’t use a variable during the declaration of an event handler as it will use the value for the assignment and then never change – it will always look for the same thing later. Instead, do the comparison inside the event handler. It’s difficult to explain what I mean but here’s the code and a working link…

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

jsFiddle link