Question

我看不出为什么最终点击事件无效。它应该.fadeIn所有列表项，然后.hide任何不匹配的列表项。 .fadeIn似乎没有开火。

预期行为

过滤'All，Rum＆amp;可乐'
二级过滤器由'Blonde，Brunette'

赞赏任何评论或改进。

HTML

<ul id="drinks">
  <li data-drink="all"><a data-drink="all" href="#">All</a></li>
  <li data-drink="rum"><a data-drink="rum" href="#">Rum</a></li>
  <li data-drink="cola"><a data-drink="cola" href="#">Cola</a></li>
</ul>

<ul id="drink-orders">
   <li class="blonde"><a class="blonde" data-drink="rum" href="#">Blonde</a></li>
   <li class="brunette"><a class="brunette" data-drink="cola" href="#">Brunette</a></li>
   <li class="blonde"><a class="blonde" data-drink="rum" href="#">Blonde</a></li>
   <li class="brunette"><a class="brunette" data-drink="cola" href="#">Brunette</a></li>
</ul>

JQuery的

$('#drinks a').click(function(e) {

e.preventDefault();

var alcohol = $(this).attr("data-drink");

if ($(this).attr("data-drink") === "all") {
    $("#drink-orders li").fadeIn();
}

else {
    $("#drink-orders li").fadeIn();
    $("#drink-orders li:not([data-drink="+alcohol+"])").hide();  
}
});

$('#girls a').click(function(e) {

e.preventDefault();

var hair = $(this).attr("class");

$("#drink-orders li").fadeIn();
$("#drink-orders li:not(class="+hair+")").hide();

});

Answer 1

<强>更新

http://jsfiddle.net/Tentonaxe/V8c8C/9/

$('#drinks a').click(function(e) {

    e.preventDefault();

    var alcohol = $(this).attr("data-drink");

    if ($(this).attr("data-drink") === "all") {
        $("#drink-orders li").fadeIn();
    }

    else {
        $("#drink-orders li").fadeIn();
        $("#drink-orders li:not([data-drink="+alcohol+"])").hide();  
    }
});

$('#girls a').click(function(e) {

    var hair = $(this).attr("class");

    e.preventDefault();

    $("#drink-orders li:not(."+hair+")").hide();
    $("#drink-orders li."+hair).fadeIn();

});

单击事件触发但.fadeIn不起作用

1 个答案: