jQuery几次点击元素重载内容答案

【问题标题】：jQuery several clicks on element overload contentjQuery几次点击元素重载内容
【发布时间】：2017-04-17 21:17:57
【问题描述】：

我在模态框内创建了登录和注册表单。您可以通过单击heading(h2) 或switcher(span) 来切换两种形式。到现在为止，一切都很完美，但是当我在切换器上单击 8 或 10 次（“标题或跨度”）时，两种形式都会出现！这是代码

 $('#modal-switcher, #modalheading').on('click', function(){


    // reset form on switch
    $('.modal-content form').trigger('reset');

         var h2   = $('#modalheading'),
         signup   = $('#modalsignupform'),
         login    = $('#modalloginform'),
         switcher = $('#modal-switcher');

    if(h2.hasClass('signup')){

        h2.addClass('login').removeClass('signup').html('Login OR <a id="modal-switcher1">Signup</a>');
        signup.hide();
        login.fadeIn('slow');
        switcher.text('Go to signup');

    }else{
        h2.addClass('signup').removeClass('login').html('Signup OR <a id="modal-switcher1">Login</a>');
        login.hide();
        signup.fadeIn('slow');
        switcher.text('Go to login');
    }


});

任何解释为什么几次点击会导致这个问题？？？什么可能是一个很好的解决方案谢谢！！

【问题讨论】：

我不建议更改 html，只有 2 个单独的 div，您可以通过 css 类（display: none;）或类似的东西来切换显示
如果绝对需要，您可以进一步阻止clickaction，直到执行页面/内容替换。
@Searching 是的，这就是我试图弄清楚如何停止这几次点击的原因，.one('click') 没有用
您是否遗漏了一些其他重要的代码？ modal-switcher 在哪里？ modal-switcher1 一样吗？如果您需要更改标题的文本，则放置另一个可以通过.text() 方法更改的元素。 <span class='heading-text'>Signup OR </span><a id="modal-switcher1">Login</a> ... $('.heading-text').text('Login OR');
需要注意的一点是hide fadeIn 等。在计时器上工作，所以不能保证它总是以相同的方式运行...check this。所以尝试@Isaac选项..可以使用css动画..

标签： javascript jquery html

【解决方案1】：

我认为您对.fadeIn('slow') 的问题。如果你快速切换，那么动画在第二个事件开始之前没有时间结束。你会有人工制品。我建议您在事件无法完成时阻止元素。例如，您可以尝试这样的事情：

 $('#modal-switcher, #modalheading').on('click', function(){

    if($(this).hasClass('locked')) {
       return false;
    }

    $('#modal-switcher').addClass('locked'); 
    $('#modalheading').addClass('locked'); 

    // reset form on switch
    $('.modal-content form').trigger('reset');

         var h2   = $('#modalheading'),
         signup   = $('#modalsignupform'),
         login    = $('#modalloginform'),
         switcher = $('#modal-switcher');

    if(h2.hasClass('signup')){

        h2.addClass('login').removeClass('signup').html('Login OR <a id="modal-switcher1">Signup</a>');
        signup.hide();
        login.fadeIn('slow', function(){
        //on complete
         $('#modal-switcher').removeClass('locked'); 
         $('#modalheading').removeClass('locked'); 

        });
        switcher.text('Go to signup');

    }else{
        h2.addClass('signup').removeClass('login').html('Signup OR <a id="modal-switcher1">Login</a>');
        login.hide();
        signup.fadeIn('slow', function(){
        //on complete
         $('#modal-switcher').removeClass('locked'); 
         $('#modalheading').removeClass('locked'); 

        });
        switcher.text('Go to login');
    }
});

您可以在（我的自定义）锁定类中使用一些预加载器图标。

【讨论】：