Pomoc pri programovaní, odpovede na otázky / jQuery / Kontaktný formulár 7: Zobraziť / skryť div pri výbere - jQuery, CSS

Kontaktný formulár 7: Zobraziť / skryť div pri výbere - jQuery, CSS

Sledujem tento príspevok jquery show-hide DIV s rozbaľovacou ponukou KONTAKTNÝ FORMULÁR 7 (vyberte pole) vytvoriť / skryť zobrazenie v závislosti od výberu.

Práve som vytvoril formulár, ale ako potom implementovať funkciu jquery? Vytvoril som značky HTML, Head, Body na stránke kontaktného formulára 7? Pretože sa snažím, ale nefunguje.

<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();
});

EDIT:

<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>

odpovede:

1 pre odpoveď č. 1

Svoj jquery môžete implementovať do súboru .js. Jeden už môžete mať v priečinku js ... môžete ho skopírovať a vložiť tam.

Ďalším riešením by mohlo byť vytvorenie súboru displayHide.js a jeho pridanie do témy wordpress.

Budete musieť ísť na your functions.php a použiť wp_enqueue_script, aby ste mohli použiť js na vašu tému wp. Tu je odkaz, aby ste vedeli, ako to implementovať: https://codex.wordpress.org/Function_Reference/wp_enqueue_script

Príklad:

<?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" );
?>

Implementácia súboru JS do ľubovoľného súboru kontaktného formulára 7 nie je dobrý nápad, pretože v určitom okamihu budete musieť aktualizovať svoj doplnok a váš vlastný kód bude odstránený.