0

我有一组单选按钮和一个 div。When the page loads, I do not want the div visible, and when button 1-3 is selected, I want the div to show. 选择按钮4或5时，我不希望Div显示。

我目前在所有浏览器中都可以使用它，除了 IE（惊喜）。我似乎无法弄清楚出了什么问题。我用了萤火虫，没有错误。这是我所拥有的：

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() {

它可能无助于解决问题。您可以将事件处理程序压缩为单个处理程序..

并使用其中一个$(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

更好地使用jQuery.ready ()方法而不是window.onload

      $( 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()事件替换为单个事件：

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

问题是您将 jQuery 对象传递给window.onload，它需要一个函数，例如

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 回答