我正在使用jQuery在提交表单后显示成功消息。表单是使用wordpress插件联系表单7创建的。类wpcf7-mail-sent-ok
是由插件ajax提交脚本动态添加的。我试图这样做,以便当用户点击该消息时,它淡出然后消失。出于某种原因,虽然removeClass方法不起作用。
任何人都可以看到它不应该起作用的任何理由吗?超时功能肯定有效,因为我通过“alert()”调用测试它。谢谢你的帮助。
PS ...我正在使用LESS css,以便解释此处发布的css中的.opacity()语法。
HTML:
<div class="wpcf7-response-output wpcf7-mail-sent-ok"><div class="image"></div></div>
Jquery + CSS
var $sent = $('.wpcf7-mail-sent-ok ');
function remove() {$sent.hide().removeClass('wpcf7-mail-sent-ok hide').removeAttr('style')}
$sent.live("click", function(){
$(this).addClass('hide');
setTimeout(remove,400)
});
.wpcf7-response-output {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: -1;
background: transparent;
opacity: 0;
-moz-opacity: 0;
.transition(opacity,.4s);
}
.wpcf7-response-output.wpcf7-mail-sent-ok .image {
width: 400px;
height: 138px;
display: block;
position: absolute;
z-index: 2000;
top: 50%;
left: 50%;
margin: 0;
background: url(assets/images/loading.png) no-repeat;
background-size: 0 0;
-webkit-transition: margin .4s ease-in-out;
-moz-transition: margin .4s ease-in-out;
-o-transition: margin .4s ease-in-out;
-ms-transition: margin .4s ease-in-out;
transition: margin .4s ease-in-out;
-webkit-animation: pulse 400ms ease-out infinite alternate;
-moz-animation: pulse 400ms ease-out infinite alternate;
-o-animation: pulse 400ms ease-out infinite alternate;
animation: pulse 400ms ease-out infinite alternate
}
.wpcf7-response-output.wpcf7-mail-sent-ok {z-index: 1000; background-color: rgba(255,255,255,.7); .opacity(1)}
.wpcf7-response-output.wpcf7-mail-sent-ok .image {
height: 132px;
position: absolute;
margin: -66px 0 0 -200px;
background-size: 100% 100%;
background: url(assets/images/img-sent.png) no-repeat center center;
}
.wpcf7-mail-sent-ok.hide {.opacity(0); z-index: -1}
答案 0 :(得分:1)
它不起作用,因为在您定义函数remove
时,$sent
的值已被确定为不匹配任何元素的jQuery对象。这是因为一旦你写
var $sent = $('.wpcf7-mail-sent-ok ');
目前还没有“邮件发送”元素。
解决此问题的最简单方法是在remove
中重新评估选择器:
function remove() {
$('.wpcf7-mail-sent-ok').hide()
.removeClass('wpcf7-mail-sent-ok hide')
.removeAttr('style');
}
另一种解决方案是在点击处理程序中使用this
并将其作为参数传递给remove
:
function remove(el) {
$(el).hide()
.removeClass('wpcf7-mail-sent-ok hide')
.removeAttr('style');
}
$sent.live("click", function(){
$(this).addClass('hide');
setTimeout(function() { remove(this); },400)
});
当然,最好只使用jQuery的内置delay
并完全摆脱remove
:
$sent.live("click", function(){
$(this).addClass('hide')
.delay(400)
.hide(0) // need to pass 0 as a parameter
.removeClass('wpcf7-mail-sent-ok hide')
.removeAttr('style');
});
答案 1 :(得分:1)
我没有看到任何淡出元素的代码。它不工作的原因与@Jon提到的相同。您可以尝试使用匿名函数并将此函数this
指向click
触发的元素。试试这个。
$('.wpcf7-mail-sent-ok ').live("click", function(){
var $this = $(this).addClass('hide');
setTimeout(function(){
$this
.hide()
.removeClass('wpcf7-mail-sent-ok hide')
.removeAttr('style')
},400)
});