避免 Jquery 隐藏带有 display:none 的消息
Avoid Jquery to hide a message with display:none
希望我能找到一种方法在单击 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>
你的选择器是错误的...它应该是元素在前,然后是 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>
这里的问题是您没有等待添加新文本。
如果你看到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 并且在使用框架库时不要忘记检查文档。
希望我能找到一种方法在单击 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>
你的选择器是错误的...它应该是元素在前,然后是 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>
这里的问题是您没有等待添加新文本。
如果你看到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 并且在使用框架库时不要忘记检查文档。