避免 Jquery 隐藏带有 display:none 的消息

Question

希望我能找到一种方法在单击 link 时显示两条消息，我错过了一条消息（已添加产品）导致 display:none - 似乎无法保持可见第二条消息:(

这是我的代码：

<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

你的选择器是错误的...它应该是元素在前，然后是 class

.next('.add-button .btn-bottom-linea a')

其实应该是

 .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>

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 的消息

Avoid Jquery to hide a message with display:none

jquery

messages

onclick