这个脚本将无法在WordPress中工作

Question

我试图让下面的代码在WordPress中工作，但我无法让它工作。表格显示正确，但选择不同的选项不会执行任何操作。我无法弄清楚如何让jQuery工作。 The code itself does work.在此先感谢您的帮助！

<style type="text/css"> 
.hide { 
    display: none; 
} 
</style> 
<script type="text/javascript" src="files/jquery-1.8.1.js"></script> 
<script type="text/javascript"> 
var $j = jQuery.noConflict(); 

$j("#choices").change(function(){ 
    $j('.hide').slideUp(); 
    $j('#'+this.value).slideDown() 
}); 
</script> 
<form> 
<select id="choices"> 
     <option value="none">Select an option...</option> 
    <option value="option1">Option 1</option> 
    <option value="option2">Option 2</option> 
    <option value="option3">Option 3</option> 
     <option value="option4">Option 4</option> 
     <option value="option5">Option 5</option> 
     <option value="option6">Option 6</option> 
     <option value="option7">Option 7</option> 
</select> 
</form> 
<div id="option1" class="hide">Option 1 TEXT</div> 
<div id="option2" class="hide">Option 2 TEXT</div> 
<div id="option3" class="hide">Option 3 TEXT</div> 
<div id="option4" class="hide">Option 4 TEXT</div> 
<div id="option5" class="hide">Option 5 TEXT</div> 
<div id="option6" class="hide">Option 6 TEXT</div> 
<div id="option7" class="hide">Option 7 TEXT</div> 

Answer 1

两个流行的警告。当你的脚本执行

var $j = jQuery.noConflict(); 
$j(document).ready(function(){ 
$j("#choices").change(function(){ 
    $j('.hide').slideUp(); 
    $j('#'+this.value).slideDown() 
}); 
}) 

您的ID可能使用两次

• DOM还没有准备好。将ID更改为HTML和JS中的类。请与

  console.log($j("#choices")) 
  

Answer 2

试试这个：

<script type="text/javascript"> 
    var $j = jQuery.noConflict(); 

    $j(document).ready(function() { 
     $j("#choices").change(function(){ 
      $j('.hide').slideUp(); 
      $j('#'+this.value).slideDown() 
     }); 
    }); 
</script> 

这将确保jQuery的代码不执行，直到DOM已准备就绪。

Answer 3

此外，the safe and recommended method of adding JavaScript to a WordPress generated page is by using wp_enqueue_script()