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 中编写仅允许对所有内容执行操作但数据标志与 .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+'"])'

JS Fiddle 的示例。

于 2012-11-14T10:26:11.693 回答
0

正如另一个答案中提到的，您缺少]，但您的选择器也是错误的。您在 上使用not选择器li，并将.chosenflag类传递给它，它应该在 上a，没有.chosenflag类，例如：

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

工作小提琴

于 2012-11-14T10:27:19.273 回答