Question

$(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

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

Answer 2

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

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

Answer 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

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

3 个答案: