我想使用WordPress页面上的单选按钮显示/隐藏内容。当用户单击标签为“red”的单选按钮时，需要显示相应的div（类为“red”）。

下面是我正在尝试集成的（有效）示例：http://www.tutorialrepublic.com/codelab.php?topic=faq&file=jquery-show-hide-div-using-radio-button

在WordPress中，我将其放置在我主题的自定义CSS中：

.box
 {
  padding: 20px;
  display: none;
  margin-top: 20px;
  border: 1px solid #000;
 }

.red { background: #ff0000; }
.green { background: #00ff00; }
.blue { background: #0000ff; }

我已经把它放在了一个外部脚本（script pricing.js）中。该文件已复制到子主题文件夹：

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

我已将该脚本与此代码一起排入函数队列。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\');

我已将其放置在WordPress页面中：

<div><label><input name="colorRadio" type="radio" value="red" /> One- year</label>
<label><input name="colorRadio" type="radio" value="green" /> Two-year</label>
<label><input name="colorRadio" type="radio" value="blue" /> Three-year</label></div>

<div class="red box">You have selected red</div>
<div class="green box">You have selected green</div>
<div class="blue box">You have selected blue</div>

该页面显示三个单选按钮。CSS隐藏了三行“You have selected”（您已选择）。但单击单选按钮时，相应的行不会显示出来。

我错过了什么，需要改进什么？提前感谢您的回复！

jQuery(document).ready(function( $ ) {

   // Put your jQuery code here.  

});

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