Question

我有一组单选按钮和一个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完全忽略了它。

Answer 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');
        }
    });
});

<强> Check Fiddle

Answer 2

更好地使用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'); });

Answer 3

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

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

如果你想在页面加载时隐藏一个元素，那么使用css或者在窗口加载之前就准备好的DOM就更好了。

Answer 4

一个简化的代码是（，因为你的代码适用于我系统上的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>

jquery hide / show在IE中不起作用

4 个答案: