0

ラジオボタンとdivのセットがあります。ページが読み込まれるときに div を表示したくなく、ボタン 1-3 が選択されたときに div を表示したい。ボタン 4 または 5 が選択されている場合、div を表示したくありません。

現在、IEを除くすべてのブラウザで動作しています（驚き）。何が問題なのか理解できないようです。私はfirebugを使用しましたが、エラーはありません。ここに私が持っているものがあります:

HTML: -ボタン

<input type="radio" name="bWaitTime" value="1" id="group_name_0"/>
  &nbsp;&nbsp;
<input type="radio" name="bWaitTime" value="2" id="group_name_1"/>
  &nbsp;&nbsp;
<input name="bWaitTime" type="radio"  value="3" id="group_name_2"/>
  &nbsp;&nbsp;
<input type="radio" name="bWaitTime"  value="4" id="group_name_3"/>
  &nbsp;&nbsp;
<input type="radio" name="bWaitTime"  value="5" id="group_name_4"/>

-非表示にする div

<div id="yes_box">
<!--Content Here -->
</div>

そして、これが私が持っているスクリプトで、現在div #yes_box内に存在しています

      <script type="text/javascript">

          window.onload = $(function(){
                              var myDiv = $("#yes_box");
                              myDiv.hide();
                            });

          $(function(){

          var myDiv = $("#yes_box");

              $("input#group_name_0").change(function(){
                  myDiv.show('slow');  
              });
              $("input#group_name_1").change(function(){
                  myDiv.show('slow');  
              });
              $("input#group_name_2").change(function(){
                  myDiv.show('slow');  
              });
              $("input#group_name_3").change(function(){
                  myDiv.hide('slow');  
              });
              $("input#group_name_4").change(function(){
                  myDiv.hide('slow');  
              });

          });

          </script>

この正確な方法が他の場所で使用されているのを見たことがありますが、IE では問題はありませんでしたが、私の使用ではまったく機能しません。IEはそれを完全に無視します。

4

4 に答える 4

1

問題はこの行にあると思います

window.onload = $(function() {

察するに

$(window).load(function() {

問題の解決には役立たないかもしれません。イベント ハンドラーを 1 つのハンドラーにまとめることができます。

どちらかを使用する$(window).load() かDOM Ready..ここでは両方を使用する必要はありません

CSSを使用して最初は非表示にする

​#yes_box
{
    display: none;
    width: 200px;
    height: 100px;
    background-color: orange;
}​

Javascript

$(window).load(function() {
    var myDiv = $("#yes_box");
    myDiv.hide();

    $("input[type='radio']").change(function() {
        var val = this.value;
        if (val == 1 || val == 2 || val == 3) {
            myDiv.show('slow');
        }
        else {
            myDiv.hide('slow');
        }
    });
});​

フィドルをチェック

于 2012-11-15T20:40:32.723 に答える
1

window.onloadの代わりにjQueryの.ready()メソッドを使用することをお勧めします

      $( document ).ready( function() {
          var myDiv = $("#yes_box");
          myDiv.hide();

          $("input#group_name_0").change(function(){
              myDiv.show('slow');  
          });
          $("input#group_name_1").change(function(){
              myDiv.show('slow');  
          });
          $("input#group_name_2").change(function(){
              myDiv.show('slow');  
          });
          $("input#group_name_3").change(function(){
              myDiv.hide('slow');  
          });
          $("input#group_name_4").change(function(){
              myDiv.hide('slow');  
          });

      });

編集：

さらに、すべての ID が「group_name_n」パターンに一致する場合、すべての.change()イベントを 1 つのイベントに置き換えることができます。

      $("input[id^=group_name_]").change(function(){
          myDiv.show('slow');  
      });
于 2012-11-15T20:44:02.193 に答える
1

window.onload問題は、次のような関数を期待する にjQuery オブジェクトを渡していることです

window.onload = function(){
    var myDiv = $("#yes_box");
    myDiv.hide();
};

ページの読み込み時に要素を非表示にする場合は、css を使用するか、ウィンドウの読み込み前に起動する DOM の準備が整ったときに行う方がよいでしょう。

于 2012-11-15T20:48:43.390 に答える
0

簡略化されたコードは次のようになります（私のシステムのIE7,8,9ではコードが正常に機能するため）

  <script type="text/javascript">
  $(function(){

      var myDiv = $("#yes_box").hide();

      $('input[name="bWaitTime"]').change(function(){
          var value = parseInt(this.value,10);
          if (value>=1 && value <=3){
              myDiv.show('slow'); 
          } else {
              myDiv.hide('slow'); 
          }
      });
  });
  </script>
于 2012-11-15T20:45:58.120 に答える