mailchimp 订阅错误消息调整 jquery

Question

大家好，我这里有这个 mailchimp 表格

        <div id="mc_embed_signup">
            <form action="" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
                <div id="mc_embed_signup_scroll">
                    <div class="mc-field-group form-group">
                        <label for="mce-EMAIL">BE THE FIRST TO GET NOTIFIED WHEN THE WEB APP GOES LIVE</label>
                        <input type="email" value="" name="EMAIL" class="required email form-control" id="mce-EMAIL">


                        <input type="submit" value="GET NOTIFIED" name="subscribe" id="mc-embedded-subscribe" class="button btn btn-default">

                        <div id="mce-responses" class="clear">
                            <div class="response success"></div>
                            <div class="response error"></div>
                        </div>
                    </div>
                    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
                    <div style="position: absolute; left: -5000px;" aria-hidden="true">
                        <input type="text" name="b_bc12ead653de8cf1a8d33aaf8_a777cdf5c9" tabindex="-1" value="">
                    </div>
                </div>
            </form>
        </div>
        <!--End mc_embed_signup-->

我的目标是做两件事

1. 当单击表单上的提交按钮时，根据输入的 val 显示某些样式
2. 如果再次单击该按钮，则删除以前应用的样式。现在，如果我提交表单，消息将堆叠。因此，如果我输入正确的电子邮件将得到success 消息类，如果我输入一个空值，将得到error 消息类，但它们会堆叠在一起。我试图找到一种方法可以“刷新”表单并删除样式，以免它们堆叠

现在我有以下 jquery 代码（不用担心 document.ready 我还有其他代码）

            $("#mc-embedded-subscribe").click(function(){
                if ($('#mce-EMAIL').val() === '') {
                    $('div.error').attr('id', 'mce-error-response');
                } else {
                    $('div.success').attr('id', 'mce-success-response');
                }
            });

这只是检查输入的值并在点击时触发。但这是我得到的最远的，因为我不确定如何“刷新”表单以便样式可以消失。

这是我的 CSS 样式

        #mce-error-response {
            display: block;
            float: left;
            width: 444px;
            padding: 10px;
            background-color: #D23434;
            color: #FFF;
            font-weight: 500;
        }

        #mce-success-response {
            display: block;
            float: left;
            width: 444px;
            padding: 10px;
            background-color: #5ba5af;
            color: #FFF;
            font-weight: 500;
        }

Answer 1

使用这个 JQuery 代码：

<script type="application/javascript">
    $(document).ready(function(){

        $("#mc-embedded-subscribe").click(function (e) {
            var clearValues = $('#mce-responses div').siblings().removeAttr('id');
            //e.preventDefault(); uncomment to see effect
            if ($('#mce-EMAIL').val() == '') {
                clearValues;
                $('div.error').attr('id', 'mce-error-response');
            } else {
                clearValues;
                $('div.success').attr('id', 'mce-success-response');
            }
        });
    });

</script>

基本上，每当该按钮上有点击事件时，我都会首先摆脱 id 属性。我正在使用siblings() 方法来选择您的两个div 以获得切换效果。

让我知道它是否有效！