show / hide div mit einfachem jQuery-Skript

Ich möchte Inhalte anzeigen oder ausblenden, indem Sie Optionsfelder auf einer WordPress-Seite verwenden. Klickt ein Benutzer auf das Optionsfeld mit der Beschriftung “rot”, muss das entsprechende div mit der class “rot” angezeigt werden.

Hier ist das (Arbeits) Beispiel, das ich zu integrieren versuche: http://www.tutorialrepublic.com/codelab.php?topic=faq&file=jquery-show-hide-div-using-radio-button

In WordPress habe ich dies im benutzerdefinierten CSS meines Themas platziert:

.box { padding: 20px; display: none; margin-top: 20px; border: 1px solid #000; } .red { background: #ff0000; } .green { background: #00ff00; } .blue { background: #0000ff; } 

Ich habe dies in einem externen Skript (script-pricing.js) platziert. Diese Datei wurde in den Child-Theme-Ordner kopiert:

 $(document).ready(function(){ $('input[type="radio"]').click(function(){ if($(this).attr("value")=="red"){ $(".box").not(".red").hide(); $(".red").show(); } if($(this).attr("value")=="green"){ $(".box").not(".green").hide(); $(".green").show(); } if($(this).attr("value")=="blue"){ $(".box").not(".blue").hide(); $(".blue").show(); } }); 

Ich habe dieses Skript mit diesem Code in functions.php eingereiht:

 //add a custom jQuery script to WordPress function add_pricing() { wp_register_script('pricing', get_stylesheet_directory_uri() . '/script-pricing.js', array('jquery'), '1.0' ); wp_enqueue_script('pricing'); } add_action('wp_enqueue_scripts', 'add_pricing'); 

Ich habe dies auf einer WordPress-Seite platziert:

 
You have selected red
You have selected green
You have selected blue

Die Seite zeigt die drei Optionsfelder an. Das CSS verbirgt die drei “Sie haben ausgewählt” -Linien. Wenn jedoch ein Optionsfeld angeklickt wird, wird die entsprechende Zeile nicht angezeigt.

Was habe ich vermisst und was muss verbessert werden? Vielen Dank im Voraus für Ihre Antwort!

Solutions Collecting From Web of "show / hide div mit einfachem jQuery-Skript"

Wahrscheinlich liegt die Ursache Ihres Problems darin, dass sich jQuery im Kompatibilitätsmodus befindet. Dies bedeutet, dass Sie den ‘$’ Shortcode nicht verwenden können.

Um Ihren JavaScript-Code zu aktivieren, ersetzen Sie alle ‘$’ durch ‘jQuery’

Oder wickeln Sie Ihren Code in eine anonyme function wie folgt:

 jQuery(document).ready(function( $ ) { // Put your jQuery code here. }); 

Siehe: https://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/

Ich könnte falsch liegen, aber imho ist es besser, die ‘volle’ $handle (string) (Required) Name des Skripts in Ihrem Fall: script-pricing statt pricing .

 /** * Register/Enqueue my script into footer for better page load * Read more: {@link http://www.tutorialrepublic.com/codelab.php?topic=faq&file=jquery-show-hide-div-using-radio-button} * @version 1.0 * @since WordPress 4.4.1 */ function wpse216359_add_pricing() { wp_register_script('script-pricing', get_stylesheet_directory_uri() . '/script-pricing.js', array('jquery'), '1.0', true ); wp_enqueue_script ('script-pricing'), get_stylesheet_directory_uri() . '/script-pricing.js', array('jquery'), '1.0', true ); } add_action('wp_enqueue_scripts', 'wpse216359_add_pricing'); 

Für weitere Informationen schauen Sie sich bitte den Codex an. Der true am Ende ( $in_footer ): Wenn dieser Parameter true ist true das Skript am unteren Rand von .
Dies erfordert, dass das Thema den wp_footer() Hook an der entsprechenden Stelle hat.