Question

我正在尝试创建一个首先显示加载图标然后是加号或减号图标的点击事件。我的代码最初适用于第一次单击，但是当我再次单击相同的图标时，它不会继续if else语句。

这是我的Jquery代码：

$('a.addQueue').click(function(){

    var plusIcon = '<i class="fa fa-plus"></i>';
    var minusIcon = '<i class="fa fa-minus"></i>';
    var loadingIcon = '<i class="fa fa-circle-o-notch fa-spin"></i>';
    var innerIcon = $(this).html();

    $(this).html(loadingIcon).delay(500).queue(function(){
        if(innerIcon == plusIcon) {
            $(this).html(minusIcon);
        } else if (innerIcon == minusIcon) {
            $(this).html(plusIcon);
        }
    });

});

这是我的HTML代码：

<ul class="list-unstyled">
<li>Item 1: <span class="semi-bold">xxxx</span> <a class="addQueue" href="javascript:;"><i class="fa fa-plus"></i></a></li>
<li>Item 2: <span class="semi-bold">xxxx</span> <a class="addQueue" href="javascript:;"><i class="fa fa-plus"></i></a></li>
<li>Item 3: <span class="semi-bold">xxxx</span> <a class="addQueue" href="javascript:;"><i class="fa fa-plus"></i></a></li>
<li>Item 4: <span class="semi-bold">xxxx</span> <a class="addQueue" href="javascript:;"><i class="fa fa-plus"></i></a></li>
<li>Item 5: <span class="semi-bold">xxxxx</span> <a class="addQueue" href="javascript:;"><i class="fa fa-plus"></i></a></li>
</ul>

我希望我的功能是在点击它时应首先调用加载图标，然后根据内部html调用加号或减号图标。不知道我缺少什么，我对编程很新。

以下是我在js fidlle上的示例：http://jsfiddle.net/VZWV6/

Answer 1

从queue documentation您会发现：

请注意，在使用jQuery.queue（）添加函数时，我们应该确保最后调用jQuery.dequeue（）以便下一个函数在线执行。

你永远不会出队，所以接下来的事情永远不会执行。因此，任何动画效果（例如delay）或其他queue调用都将永远不会执行，因为原始queue永远不会出列。

$(this).html(loadingIcon).delay(500).queue(function(){
    if(innerIcon == plusIcon) {
        $(this).html(minusIcon);
    } else if (innerIcon == minusIcon) {
        $(this).html(plusIcon);
    }

    $.dequeue(this);
});

http://jsfiddle.net/VZWV6/7/

在jquery的任何最新版本中，都有更好的选择。您可以在queue documenation：

中找到

从jQuery 1.4开始，被调用的函数被传递给另一个函数作为第一个参数。调用时，这会自动完成使下一个项目出列并使队列保持移动。

这让我们可以这样做：

$(this).html(loadingIcon).delay(500).queue(function(next){
    if(innerIcon == plusIcon) {
        $(this).html(minusIcon);
    } else if (innerIcon == minusIcon) {
        $(this).html(plusIcon);
    }

    next();
});

http://jsfiddle.net/VZWV6/7/

Answer 2

<强> jsFiddle Demo

queue 的回调函数需要该函数知道如何将自身出列。由于您的函数不这样做，下次为该元素推送队列函数时，它仍在等待前一个元素完成。要解决此问题，请将$( this ).dequeue();添加到队列函数中。

 $(this).html(loadingIcon).delay(500).queue(function(){
    if(innerIcon == plusIcon) {
        $(this).html(minusIcon);
    } else if (innerIcon == minusIcon) {
        $(this).html(plusIcon);
    }
    $( this ).dequeue();
 });

使用If Else语句的Jquery .click函数

2 个答案: