Question

希望我能找到一种方法来点击链接时显示两条消息，我错过了一条消息（产品已添加）导致显示：无 - 似乎没有办法让第二条消息保持可见:(

这是我的代码：

<script>
$(document).ready(function() {
$('.shop').click(function(){
$(this).next('.add-button .btn-bottom-linea a').text('Product Added').delay(3000).fadeOut(500);
$(this).text('Add another product').hide().delay(3500).fadeIn(500);
});
});
</script>

<a href="#0" class="shop add-button btn-bottom-line">Add Product</a>

Answer 1

你的选择器错了......它应该是元素优先然后是类

 .next('a.add-button')   // since once class selector is enough

实际应该是

$(document).ready(function(){
    $('.shop').click(function(){
		$(this).next('a.btn-bottom-line').text('Product 			Added').delay(3000).fadeOut(500);
        
		$(this).text('Add anthr product').delay(3500).fadeIn(500);
	});
});

这是一个工作示例

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<a href="#0" class="shop add-button btn-bottom-line">Add Product</a>
 
<a href="#0" class="shop add-button btn-bottom-line">Add Product</a>

{{1}}

Answer 2

这里的事情是你不是在等待添加新文本。

如果你看到here你可以看到.fadeOut（duration，complete）接受2个参数，第一个是以毫秒为单位的时间，第二个是动画后将调用的回调。

代码应该是这样的：

$(document).ready(function() {
    $('.shop').click(function(e){

        var element = $(this);
        element.text('Product Added').delay(3000).fadeOut(500, function () {
            element.text('Add another product').hide().delay(3500).fadeIn(500);
        });
    });

});

查看JS中的promises，并且在使用框架库时不要忘记检查文档。

避免Jquery使用display：none隐藏消息

2 个答案: