$(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
我不相信OPTION元素具有点击事件。您需要将点击处理程序附加到SELECT元素,然后检查选择的选项。\
(免责声明:空编码)
$(document).ready(function(){
$('#createGallery').hide();
$("#gallerySelect").click(function () {
if (this.options[this.selectedIndex].id == 'newGallery') {
$("#createGallery").show('slow');
} else {
$("#createGallery").hide('slow');
}
});
});
这将有助于获取当前页面的HTML,以及更多了解该问题。
alert($("#gallerySelect > option").not("#newGallery").length);
或alert($("#gallerySelect > option").length);
返回什么?您所有的选项元素都具有相同的值...通常,这不是如何使用此元素的方法。另外,如果您要立即隐藏元素,则可以在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