jquery - 通过 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> s，只需确保在 WordPress 呈现联系表单后 HTML 看起来正确即可。