Question

所以我试图在容器（.right-side-product-page）上添加一个类，在联系人7表单上添加一个h2。这是一个链接：

https://nameplicity.com/domains/miningaid/

目标是更改班级，使蓝色背景和灰色背景变为白色，但仅在提交商品后才会生效。

我已尝试添加CSS和JavaScript，但似乎无法正常工作。以下是我在＆＃34;其他设置＆＃34;中尝试使用的代码。 Contact Form 7插件下的部分：

document.addEventListener( 'wpcf7submit', function( event ) {
if ( '19533' == event.detail.contactFormId ) {
var theDropDown = document.querySelector(".right-side-product-page");
theDropDown.classList.add("MyClass");
}, false );

任何人都可以指出我做错了什么吗？

Answer 1

您的代码中存在错误：您在那里缺少一个大括号。

试试这个：

<script>
document.addEventListener( 'wpcf7submit', function( event ) {
    if ( '19533' == event.detail.contactFormId ) {
        var theDropDown = document.querySelector(".right-side-product-page");
        theDropDown.classList.add("MyClass");
    }
}, false );
</script>

Answer 2

除了上面提到的错误之外，您还可以根据添加到wpcp7-response-output块的类进一步完成解决方案，成功发送消息后，添加wpcf7-mail-sent-ok类。知道了这一点，我们可以通过检查来利用这些课程，这是一个例子：

$( document ).ready(function() {
    var outputBlock = $(".wpcf7-response-output");
    var theDropDown = document.querySelector(".right-side-product-page");
    $( ".wpcf7-submit" ).click(function() {
        //Start an interval check after submit has been clicked
        var intervalCheck = setInterval(function () {
            if (outputBlock.hasClass("wpcf7-mail-sent-ok")) {
                // The form has been submitted successfully, set the class to the block to change color
                theDropDown.classList.add("MyClass");
                // Stop running the interval checker after class has been added
                clearInterval(intervalCheck);
            }
        },1000);
    });
});

Answer 3

尝试：

document.querySelector('.wpcf7-form').addEventListener('submit', function (ev) {
    if(this['_wpcf7'].value == '19533') {
        document.querySelector(".right-side-product-page").classList.add("MyClass");
    }
});

或

document.querySelector('.wpcf7-form').addEventListener('wpcf7submit', function (ev) {
    if(this['_wpcf7'].value == '19533') {
        document.querySelector(".right-side-product-page").classList.add("MyClass");
    }
}, false);

其中一个应该有用。我认为问题在于您正在侦听的事件wpcf7submit在文档中不存在。它存在于document.querySelector（'。wpcf7-form'）。

Answer 4

知道了！

必须将其放在提交按钮下并将其包含在标签中。谢谢大家的帮助!!!

提交联系表格7后更改Div的背景

4 个答案: