0

以下のコードを WordPress で動作させようとしていますが、動作させることができません。フォームは正しく表示されますが、別のオプションを選択しても何も起こりません。jQueryを機能させる方法がわかりません。コード自体は機能します。よろしくお願いします。

<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>
4

3 に答える 3

2

2 つの一般的な注意事項。

  • スクリプトの実行時に DOM の準備ができていない

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

  • ID が 2 回使用される可能性があります。ID を HTML および JS のクラスに変更します。確認する

    console.log( $j("#choices") )
于 2012-09-15T19:05:09.903 に答える
1

これを試して：

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

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

これにより、DOM の準備が整うまで jQuery コードが実行されないようになります。

于 2012-09-15T19:05:01.997 に答える