Question

我正在关注这篇文章jquery show-hide DIV with CONTACT FORM 7 dropdown menu (select field) 根据选择创建显示/隐藏。

我刚刚创建了表单，但是后来如何实现jquery函数？我要在联系表格7页面中创建一个html，head，body标签？因为我正在尝试但不起作用。

<select id="reason">
<option>...</option>
<option value="I want to hire you">I want to hire you</option>
<option value="I want to ask you a question">I want to ask you a question</option>
    <option value="I want to say hello">I want to say hello</option>
</select>

<div id="I want to hire you" class="note">I am currently available</div>
<div id="I want to ask you a question" class="note">Feel free to ask</div>
<div id="I want to say hello" class="note">Get in touch</div>

的jQuery

$('.note').hide();
$(document).on("change", "#reason", function () {
$('.note').hide();
var neededId = $(this).val();
var divToShow = $(".note").filter("[id='" + neededId + "']");
divToShow.show();
});

编辑：

<html>
<head>
<script>
$('.note').hide();

$(document).on("change", "#reason", function () {
$('.note').hide();
var neededId = $(this).val();
var divToShow = $(".note").filter("[id='" + neededId + "']");
divToShow.show();
});
</script>
<body>
<select id="reason">
<option>...</option>
<option value="I want to hire you">I want to hire you</option>
<option value="I want to ask you a question">I want to ask you a question</option>
<option value="I want to say hello">I want to say hello</option>
</select>

<div style="display: none;" id="I want to hire you" class="note">I am currently available</div>
<div style="display: none;" id="I want to ask you a question" class="note">Feel free to ask</div>
<div style="display: none;" id="I want to say hello" class="note">Get in touch</div>
</body>
</html>

Answer 1

您可以在.js文件上实现jquery。您可能已经在js文件夹中有一个...您可以将其粘贴到那里。

另一个解决方案是创建displayHide.js并将其添加到wordpress主题。

你必须转到你的functions.php并使用wp_enqueue_script才能在你的wp主题上使用js。以下链接供您了解如何实施：https://codex.wordpress.org/Function_Reference/wp_enqueue_script

示例：

<?php
    function my_scripts_method() {
      wp_enqueue_script(
        'custom-script',
        get_stylesheet_directory_uri() . '/js/displayHide.js',
        array( 'jquery' )
      );
}

 add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
?>

在任何联系表单-7文件中实现你的js不是一个好主意，因为在某些时候你必须更新你的插件，你的自定义代码将被删除。

联系表格7：选择时显示/隐藏div

1 个答案: