javascript - 该脚本在 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

两个流行的警告。

• 执行脚本时 DOM 尚未准备好

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

• 您的 ID 可能会被使用两次。将 HTML 和 JS 中的 ID 更改为类。检查

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