mostrar / ocultar div com script jQuery simples

Quero mostrar / esconder conteúdo usando botões de opção em uma página do WordPress. Quando um usuário clica no botão de opção com o label “vermelho”, a correspondente div com a class “vermelho” precisa aparecer.

Aqui está o exemplo (trabalhando) que estou tentando integrar: http://www.tutorialrepublic.com/codelab.php?topic=faq&file=jquery-show-hide-div-using-radio-button

No WordPress, coloquei isso no CSS personalizado do meu tema:

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

Coloquei isso em um script externo (script-pricing.js). Esse arquivo foi copiado para a pasta do tema filho:

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

Eu criei esse script com esse código em functions.php:

 //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'); 

Coloquei isso em uma página do WordPress:

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

A página exibe os três botões de opção. O CSS esconde as três linhas “Você selecionou”. Mas quando um botão de opção é clicado, a linha respectiva não está aparecendo.

O que eu perdi e o que precisa ser melhorado? Agradecemos antecipadamente a sua resposta!

Solutions Collecting From Web of "mostrar / ocultar div com script jQuery simples"

Provavelmente, a causa do seu problema é que jQuery está no modo de compatibilidade. Isso significa que você não pode usar o shortcode ‘$’.

Para que seu código Javascript funcione, substitua todos os “$” por “jQuery”

Ou, envolva seu código em uma function anônima, assim:

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

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

Eu poderia estar errado, mas é melhor usar o ‘cheio’ $handle (string) (Obrigatório) Nome do script no seu caso: script-pricing vez de 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'); 

Para mais informações, dê uma olhada no códice. O true no final ( $in_footer ): se esse parâmetro for true o script será colocado na parte inferior do .
Isso exige que o tema tenha o wp_footer() no local apropriado.