0

私はこの非常に単純なjqueryコードを持っているか、そう思っていましたが、期待どおりに機能しません

私が望むのは、ドロップダウンから選択された値 = 'Poster' の場合、すべてのフィールドセットを非表示にしてから、選択したものを表示することだけです。ドロップダウンから選択された値 = 'Logo' の場合、すべてのフィールドセットを非表示にしてから、選択したものを表示します。簡単なことはわかっていますが、フィールドセットが常に非表示になるとは限りません。

たとえば、下から「ロゴ」を選択すると、 1 つのフィールドセットのみが表示されます。これは機能し、「ブックレット」を選択すると、いくつかのフィールドセットが表示され、これが機能しますが、戻ってロゴを再度選択すると、すべてを非表示にしてから、プロジェクト タイプ「ロゴ」に必要なフィールド セットを表示する代わりに、すべてのフィールド セットが残ります。

誰かが私が間違っていることを見ることができますか? 注: プロジェクト タイプのドロップダウン フィールドを変更すると、projectTypeChange() が呼び出されます。

function projectTypeChange()
{
        $(document).ready(function() {
        $('fieldset#section-960', 'fieldset#section-961', 'fieldset#section-962', 'fieldset#section-964', 'fieldset#section-967').hide();
        var dropVal = $('select#6211').val();

       if(dropVal ==  "Poster")
           {
              $('fieldset#section-960', 'fieldset#section-961', 'fieldset#section-962', 'fieldset#section-964', 'fieldset#section-967').hide();
              $('fieldset#section-960').show(); 
              $('fieldset#section-961').show(); 
              $('fieldset#section-967').show(); 
              $('fieldset#section-962').show(); 
           }
       if(dropVal ==  "Booklet")
           {
              $('fieldset#section-960', 'fieldset#section-961', 'fieldset#section-962', 'fieldset#section-964', 'fieldset#section-967').hide();
              $('fieldset#section-960').show(); 
              $('fieldset#section-961').show(); 
              $('fieldset#section-967').show(); 
              $('fieldset#section-962').show(); 
              $('fieldset#section-964').show(); 
           }
       if(dropVal ==  "Logo")
           {
              $('fieldset#section-960', 'fieldset#section-961', 'fieldset#section-962', 'fieldset#section-964', 'fieldset#section-967').hide();
              $('fieldset#section-962').show(); 
           }

        });
}
4

2 に答える 2

1

使うから

$(document).ready(function() { });

これは通常、ドキュメントがロードされた直後に何かを行うために使用されます。ドロップダウン ボックスが変更されると、ドキュメントは少し前に読み込まれ、その中のすべてが読み込まれます。

$(document).ready(function() { 

    // this part here

 });

実行しません。

簡単な解決策: $(document).ready(function() {(およびイベント ハンドラーからその閉じ括弧を削除});します。そもそもそこにあるべきではありません。イベント ハンドラーの外側のどこかに配置します。

修正されたコードは次のようになります。

$(document).ready(function() {
    $('fieldset#section-960', 'fieldset#section-961', 'fieldset#section-962', 'fieldset#section-964','fieldset#section-967').hide();
});

function projectTypeChange()
{
        var dropVal = $('select#6211').val();

       if(dropVal ==  "Poster")
           {
              $('fieldset#section-960', 'fieldset#section-961', 'fieldset#section-962', 'fieldset#section-964', 'fieldset#section-967').hide();
              $('fieldset#section-960').show(); 
              $('fieldset#section-961').show(); 
              $('fieldset#section-967').show(); 
              $('fieldset#section-962').show(); 
           }
       if(dropVal ==  "Booklet")
           {
              $('fieldset#section-960', 'fieldset#section-961', 'fieldset#section-962', 'fieldset#section-964', 'fieldset#section-967').hide();
              $('fieldset#section-960').show(); 
              $('fieldset#section-961').show(); 
              $('fieldset#section-967').show(); 
              $('fieldset#section-962').show(); 
              $('fieldset#section-964').show(); 
           }
       if(dropVal ==  "Logo")
           {
              $('fieldset#section-960', 'fieldset#section-961', 'fieldset#section-962', 'fieldset#section-964', 'fieldset#section-967').hide();
              $('fieldset#section-962').show(); 
           }


}
于 2012-08-13T14:04:07.190 に答える
-1

わかりました、今私を撃ってください。私はそれを見つけました - いつも起こるようです,後, 私は助けを求めました.

問題は私の引用でした。

$ ( 'fieldset#section-960', 'fieldset#section-961', 'fieldset#section-962', 'fieldset#section-964', 'fieldset#section-967').hide();

$(' fieldset #section-960, fieldset#section-961, fieldset#section-962, fieldset#section-964, fieldset#section-967').hide();

それぞれを囲むのではなく、最後に引用符を付けます。うまくいけば、他の誰かが私と同じようにばかげていると感じないようにするために、これはそのままにしておきます. ご意見ありがとうございます。

于 2012-08-13T14:13:44.430 に答える