這個腳本將無法在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()