我正在关注这篇文章 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>
最佳答案
您可以在 .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' );
?>
在任何 contact form-7 文件中实现你的 js 并不是一个好主意，因为在某些时候你将不得不更新你的插件并且你的自定义代码将被删除。
关于jquery - 联系表格 7 : display/hide div on selection，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33595454/