Question

我在这里不知所措，我需要你的帮助。

我有一个网站，您可以将故事网址提交到数据库。当你点击提交按钮时，会设置一个jquery post请求调用我的php，然后返回一个json对象，里面有一个布尔值来指示它是否成功。

然后根据php的成功，提交按钮使用一些花哨的css转换来向用户指示他们提交的状态。

我会为你们做一个jfiddle，但我不知道如何模仿php发回请求，因为这个网站只在我的本地机器上。

这是jquery：

function applySubmitFeedback(activatedClass) {
    $('#submit').click(function() {
        var self = this;
        $(this).addClass(activatedClass);
        setTimeout(function() {
            $(self).removeClass(activatedClass);
        }, 1000);
    });
}

$(document).ready(function() {
    $('form').submit(function(event) {

        event.preventDefault();

        var $form = $(this), 
            term = $form.find("input[name='url']").val(),
            url = $form.attr("action");

        $.post( url, { story_url:term }, function(data) {
            if (!data.success) {
                console.log("failed");
                if (typeof data.message == 'json' && data.message.hasOwnProperty("url"))
                    console.log(data.message.url);
                else
                    console.log(data.message)
                applySubmitFeedback('btn-error3d');
            else {
                console.log("success");
                applySubmitFeedback('btn-success3d');
            }
            console.log(data);
        }, "json");
    });
});

这就是花哨的css：

.btn-8g {
    background: #fff;
    color: #999;
}

.btn-8g:active {
    background: #fff;
}

.btn-8g:after,
.btn-8g:before {
    text-transform: uppercase;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    line-height: 70px;
}

.btn-8g:after {
    top: -98%; /* should be -100% but there's a gap in Chrome Version 34.0.1847.131 */
    background: #7aca7c;
    color: #358337;
    content: 'It worked!';
    -webkit-transform-origin: 0% 100%;
    -webkit-transform: rotateX(90deg);
    -moz-transform-origin: 0% 100%;
    -moz-transform: rotateX(90deg);
    -ms-transform-origin: 0% 100%;
    -ms-transform: rotateX(90deg);
    transform-origin: 0% 100%;
    transform: rotateX(90deg);
}

.btn-8g:before {
    top: 100%;
    background: #e96a6a;
    color: #a33a3a;
    content: 'Error!';
    font-weight: 700;
    font-family: 'Lato', Calibri, Arial, sans-serif;
    -webkit-transform-origin: 0% 0%;
    -webkit-transform: rotateX(-90deg);
    -moz-transform-origin: 0% 0%;
    -moz-transform: rotateX(-90deg);
    -ms-transform-origin: 0% 0%;
    -ms-transform: rotateX(-90deg);
    transform-origin: 0% 0%;
    transform: rotateX(-90deg);
}

.btn-8g.btn-success3d {
    background: #aaa;
    -webkit-transform-origin: 50% 100%;
    -webkit-transform: rotateX(-90deg) translateY(100%);
    -moz-transform-origin: 50% 100%;
    -moz-transform: rotateX(-90deg) translateY(100%);
    -ms-transform-origin: 50% 100%;
    -ms-transform: rotateX(-90deg) translateY(100%);
    transform-origin: 50% 100%;
    transform: rotateX(-90deg) translateY(100%);
}

.btn-8g.btn-error3d  {
    background: #aaa;
    -webkit-transform-origin: 50% 0%;
    -webkit-transform: rotateX(90deg) translateY(-100%);
    -moz-transform-origin: 50% 0%;
    -moz-transform: rotateX(90deg) translateY(-100%);
    -ms-transform-origin: 50% 0%;
    -ms-transform: rotateX(90deg) translateY(-100%);
    transform-origin: 50% 0%;
    transform: rotateX(90deg) translateY(-100%);
}

我的问题是，当我第一次点击提交按钮时css似乎卡住了，直到后续点击才激活。另外，如果我先发送有效数据，那么在第二次点击“It works”css就会激活。

但是，如果我然后发送错误数据，“It works”css将再次触发，然后“Error”数据将被触发。在那之后无论我做什么它只会触发“错误”css，即使我可以在控制台日志中验证，并且chrome js调试器它进入'if（！data.success）'块的else条件，意思是它应该触发'applySubmitFeedback（'btn-success3d'）;'但它仍然会像是一个错误一样开火。

感觉就像在这里工作有缓存问题或者函数不像我认为的那样在jquery中工作。请帮帮我。

Answer 1

在我看来，您实际上并没有在第一次点击时添加任何类...只需添加将在后续事件中添加类的点击事件。

function applySubmitFeedback(activatedClass) {
    $('#submit').click(function() { // <--- this click event isn't bound until you click submit at least once
        var self = this;
        $(this).addClass(activatedClass); 
        setTimeout(function() {
            $(self).removeClass(activatedClass);
        }, 1000);
    });
}

我认为问题是：在$.post()完成之前，你在哪里获得'activatedClass'变量？当你完成ajax时，你的脚本会告诉按钮在下一次时有人点击它时执行特定的功能。在运行ajax之前，您无法知道激活的类。解决方案可能是（1）从click事件中删除activatedClass参数，或者（2）创建默认的activatedClass值。

CSS不首先点击提交时使用jQuery.post，然后不再更新后续点击

1 个答案: