通过 jquery [Wordpress] 切换从简码生成的联系表格

Question

我有 2 个使用联系表 7 的联系表，我正在尝试使用单选按钮在其中 2 个之间切换。我已经用普通文本尝试了以下内容，但它似乎与简码有关。

这是我的：

<p><input type='radio' name='contact_type' value='1' />&nbsp; Sales</p>
<p><input type='radio' name='contact_type' value='2' />&nbsp; Support</p>
<div id='sales' style="display: none;">[contact-form-7 id="261" title="Sales"]</div>
<div id='support' style="display: none;">[contact-form-7 id="260" title="Support"]</div>

<script type="text/javascript" src="/scripts/updatepage.js"></script>
<script type="text/javascript">
$('input[name=contact_type]').on('change', function(){
    var n = $(this).val();
    switch(n)
    {
            case '1':
                  $('#sales').style.display = "block";
                  $('#support').style.display = "none";
                  break;
            case '2':
                  $('#support').style.display = "block";
                  $('#sales').style.display = "none";
                  break;
        }
    });
</script>

目前所有这些都在线完成，因此不检查 DOM 加载。

Answer 1

您正在混合 Jquery 对象与 javascript。

例如对象$('#support')没有属性.style.display

试试这个：

$('input[name=contact_type]').on('change', function(){
    var n = $(this).val();
    if(n == '1'){
        $('#sales').show();
        $('#support').hide();
    }
    else {
        $('#support').show();
        $('#sales').hide();        
    }
});

WordPress 短代码不应影响两个父 <div>，只需确保 HTML 在 WordPress 呈现联系表格后看起来正确。

Answer 2

这是jquery

的函数

$( document ).ready(function() {
    $('input[name=contact_type]').change(function(){
        var n = $(this).val();
        switch(n)
        {
        case '1':
            $('#sales').show();
            $('#support').hide();
            break;
        case '2':
            $('#support').show();
            $('#sales').hide();
            break;
        }
    })
});

通过 jquery [Wordpress] 切换从简码生成的联系表格

Switching contact forms generated from shortcode via jquery [Wordpress]

css

wordpress

jquery

contact-form-7