简单的 jQuery 隐藏/显示在 IE 中不起作用答案

【问题标题】：Simple jQuery Hide/Show does not work in IE简单的 jQuery 隐藏/显示在 IE 中不起作用
【发布时间】：2010-10-24 20:34:48
【问题描述】：

$(document).ready(function () {
    $('#createGallery').hide();

    $("#newGallery").click(function () {
        $("#createGallery").show('slow');
    });
    $("#gallerySelect > option").not("#newGallery").click(function () {
        $("#createGallery").hide('slow');
    });
});

我不知道为什么。似乎很容易。我的 HTML 在 HAML 中。但是如果您不知道 HAML 是什么，它很容易理解。我的 HAML 内容如下：

        #createGallery
          %span{ :style => "color:#1B75BC; font-size: 15px;" }
            new gallery
          %br
          %form{ :action => ""}
            %input{ :name => "tabname", :type => "text", :rows => "1", :cols => "30", :style => "height: 15px; width: 260px; margin-right: 40px;"}

        %span{ :style => "color:#1B75BC; font-size: 15px;" }
          gallery

        %form{ :action => ""}
          %select#gallerySelect{ :name => "Choose Gallery", :style => "width:260px" }
            %option{ :selected => "selected", :value => "QuickFact" }
              Choose Gallery
            %option{ :value => "QuickFact"}
              My Interior Design
            %option#newGallery{ :value => "QuickFact" }
              New Gallery
        %br

【问题讨论】：

它在其他浏览器中是否有效？你的标题暗示了它，但它并不明确。

标签： javascript jquery internet-explorer cross-browser show-hide

【解决方案1】：

我不相信 OPTION 元素有点击事件。您需要将点击处理程序附加到 SELECT 元素，然后检查选择的选项。\

（免责声明：空气编码）

$(document).ready(function(){
    $('#createGallery').hide();
    $("#gallerySelect").click(function () {
        if (this.options[this.selectedIndex].id == 'newGallery') {
            $("#createGallery").show('slow');
        } else {
            $("#createGallery").hide('slow');
        }
    });
});

【讨论】：

是的，看起来您想要“更改”事件而不是点击。
我对“改变”而不是“点击”很满意……当然我的免责声明很合拍……=）
@swilliams 我测试了 great_llama 的代码，它可以在 FF3、IE8 和 IE8 中作为 7 运行。如果您考虑一下，这很有意义。这是一个托管示例：jsbin.com/avilo 可通过以下方式编辑：jsbin.com/avilo/edit
哇，瑞克！感谢一百万 great_llama 。但是，如果它的点击或更改没有区别。或者至少，我无法区分。
@Trip 如果使用click事件，如果使用键盘改变选中的选项，hide和show不会被调用。

【解决方案2】：

这将有助于获取当前页面的 HTML，以及了解更多有关问题的信息。

哪个版本的 IE 有问题？
只是隐藏/显示#createGAllery 不起作用，还是点击事件根本没有触发？
alert($("#gallerySelect > option").not("#newGallery").length); 或 alert($("#gallerySelect > option").length); 返回什么？

【讨论】：

【解决方案3】：

您的所有选项元素都具有相同的值...这通常不是该元素的使用方式。此外，如果您要立即隐藏元素，则可以在 HAML 中将其设置为这样（当然，除非您希望非 JS 用户默认看到它）。如果您按照以下方式做一些事情会更有意义：

$(function(){ 
    $("#gallerySelect").bind('change',function () {
        if($(this).val() == 'newGallery') {
            $("#createGallery").show('slow');   
        } else {
            $("#createGallery").hide('slow');
        }    
    });

});

使用 HAML 是这样的：

    #createGallery{:style => "display:none;" }
      %span{ :style => "color:#1B75BC; font-size: 15px;" }
        new gallery
      %br
      %form{ :action => ""}
        %input{ :name => "tabname", :type => "text", :rows => "1", :cols => "30", :style => "height: 15px; width: 260px; margin-right: 40px;"}

    %span{ :style => "color:#1B75BC; font-size: 15px;" }
      gallery

    %form{ :action => ""}
      %select#gallerySelect{ :name => "Choose Gallery", :style => "width:260px" }
        %option{ :selected => "selected", :value => "chooseGal" }
          Choose Gallery
        %option{ :value => "designInterior"}
          My Interior Design
        %option{ :value => "newGallery" }
          New Gallery
    %br

【讨论】：