我有一个用于生成按钮控制面板的jQuery代码。它与图像的旋转木马并排放置,并且具有最大相同的高度。如果它更高,则按钮一个接一个地隐藏,直到控制面板和转盘具有相同的高度。如果按钮被隐藏,它会添加一个"更多按钮"以后揭示这些按钮。问题是它正在删除一个额外的按钮,导致附加的图像。所有按钮的宽度和高度相同。任何人都可以在脚本中指出问题吗?
function removeExtraButtons()
{
jQuery.fn.reverse = [].reverse;
var count = 0;
$('.contbut').reverse().each(function(){
if($('.dealscontrol').outerHeight() <= $('#carousel-featured-deal').outerHeight())
{
return false;
}
else
{
$(this).addClass('hidecontbut');
$('.dealscontrol').css('height','auto');
count = count + 1;
}
});
$('.dealscontrol').css('height',$('#carousel-featured-deal').height());
if(count == 0)
{
$('#cont-more').addClass('hidecontbut');
}
}
以下是按钮部分的HTML:
<div class="dealscontrol col-xs-12 col-lg-2 col-md-3 col-sm-4 col-lg-pull-10 col-md-pull-9 col-sm-pull-8 col-xs-pull-0 featcol" style="height: 350px;">
<form id="dealcontrolform" action="/deals" method="post" accept-charset="UTF-8">
<div>
<div class="form-type-select form-item-home-hub form-item form-group">
<label for="edit-home-hub"><span class="controltext">Travel Hub</span> </label>
<select onchange="this.form.submit();" class="form-control form-select" id="edit-home-hub" name="home_hub">
<option value="1" selected="selected">New York</option>
<option value="2">San Francisco</option>
<option value="3">Chicago</option>
<option value="4">Miami</option>
<option value="5">Washington DC</option>
<option value="6">Los Angeles</option>
<option value="7">Boston</option>
<option value="8">Seattle</option>
<option value="9">Houston</option>
<option value="10">Dallas</option>
</select>
</div>
<div class="form-type-checkboxes form-item-triptype form-item form-group">
<label for="edit-triptype"><span class="controltext">Trip Type</span> </label>
<div id="edit-triptype" class="form-checkboxes control-box container-inline trip_extra form-inline">
<div class="form-type-checkbox form-item-triptype-air-package form-item checkbox">
<input class="control-box container-inline trip_extra form-inline form-checkbox" onclick="this.form.submit();" type="checkbox" id="edit-triptype-air-package" name="triptype[air_package]" value="air_package" checked="checked">
<label for="edit-triptype-air-package">
<div class="checkicon-yes" data-toggle="tooltip" data-placement="top" title="" data-original-title="Air-Inclusive Packages">
<div class="controlairinclusive controlpanelbutton contbut"></div>
</div>
</label>
</div>
<div class="form-type-checkbox form-item-triptype-hotel-only form-item checkbox">
<input class="control-box container-inline trip_extra form-inline form-checkbox" onclick="this.form.submit();" type="checkbox" id="edit-triptype-hotel-only" name="triptype[hotel_only]" value="hotel_only" checked="checked">
<label for="edit-triptype-hotel-only">
<div class="checkicon-yes" data-toggle="tooltip" data-placement="top" title="" data-original-title="Only Hotel">
<div class="controlhotel controlpanelbutton contbut"></div>
</div>
</label>
</div>
<div class="form-type-checkbox form-item-triptype-cruise form-item checkbox">
<input class="control-box container-inline trip_extra form-inline form-checkbox" onclick="this.form.submit();" type="checkbox" id="edit-triptype-cruise" name="triptype[cruise]" value="cruise" checked="checked">
<label for="edit-triptype-cruise">
<div class="checkicon-yes" data-toggle="tooltip" data-placement="top" title="" data-original-title="Cruises">
<div class="controlcruise controlpanelbutton contbut"></div>
</div>
</label>
</div>
</div>
</div>
<div class="form-type-checkboxes form-item-tripextras form-item form-group">
<label for="edit-tripextras"><span class="controltext">Extras</span> </label>
<div id="edit-tripextras" class="form-checkboxes control-box container-inline trip_extra form-inline">
<div class="form-type-checkbox form-item-tripextras-wine form-item checkbox">
<input class="control-box container-inline trip_extra form-inline form-checkbox" onclick="this.form.submit();" type="checkbox" id="edit-tripextras-wine" name="tripextras[wine]" value="wine">
<label for="edit-tripextras-wine">
<div class="checkicon-yes" data-toggle="tooltip" data-placement="top" title="" data-original-title="Wine">
<div class="controlwine controlpanelbutton contbut"></div>
</div>
</label>
</div>
<div class="form-type-checkbox form-item-tripextras-food form-item checkbox">
<input class="control-box container-inline trip_extra form-inline form-checkbox" onclick="this.form.submit();" type="checkbox" id="edit-tripextras-food" name="tripextras[food]" value="food">
<label for="edit-tripextras-food">
<div class="checkicon-yes" data-toggle="tooltip" data-placement="top" title="" data-original-title="Food">
<div class="controlfood controlpanelbutton contbut"></div>
</div>
</label>
</div>
<div class="form-type-checkbox form-item-tripextras-ski form-item checkbox">
<input class="control-box container-inline trip_extra form-inline form-checkbox" onclick="this.form.submit();" type="checkbox" id="edit-tripextras-ski" name="tripextras[ski]" value="ski">
<label for="edit-tripextras-ski">
<div class="checkicon-yes" data-toggle="tooltip" data-placement="top" title="" data-original-title="Ski">
<div class="controlski controlpanelbutton contbut"></div>
</div>
</label>
</div>
<div class="form-type-checkbox form-item-tripextras-dance form-item checkbox">
<input class="control-box container-inline trip_extra form-inline form-checkbox" onclick="this.form.submit();" type="checkbox" id="edit-tripextras-dance" name="tripextras[dance]" value="dance">
<label for="edit-tripextras-dance">
<div class="checkicon-yes" data-toggle="tooltip" data-placement="top" title="" data-original-title="Dance">
<div class="controldance controlpanelbutton contbut"></div>
</div>
</label>
</div>
<div class="form-type-checkbox form-item-tripextras-spa form-item checkbox">
<input class="control-box container-inline trip_extra form-inline form-checkbox" onclick="this.form.submit();" type="checkbox" id="edit-tripextras-spa" name="tripextras[spa]" value="spa">
<label for="edit-tripextras-spa">
<div class="checkicon-yes" data-toggle="tooltip" data-placement="top" title="" data-original-title="Spa">
<div class="controlspa controlpanelbutton contbut"></div>
</div>
</label>
</div>
<div class="form-type-checkbox form-item-tripextras-tours form-item checkbox">
<input class="control-box container-inline trip_extra form-inline form-checkbox" onclick="this.form.submit();" type="checkbox" id="edit-tripextras-tours" name="tripextras[tours]" value="tours">
<label for="edit-tripextras-tours">
<div class="checkicon-yes" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tours">
<div class="controltours controlpanelbutton contbut"></div>
</div>
</label>
</div>
<div class="form-type-checkbox form-item-tripextras-all-inclusive form-item checkbox">
<input class="control-box container-inline trip_extra form-inline form-checkbox" onclick="this.form.submit();" type="checkbox" id="edit-tripextras-all-inclusive" name="tripextras[all_inclusive]" value="all_inclusive">
<label for="edit-tripextras-all-inclusive">
<div class="checkicon-yes" data-toggle="tooltip" data-placement="top" title="" data-original-title="All Inclusive">
<div class="controlall_inclusive controlpanelbutton contbut"></div>
</div>
</label>
</div>
<div class="form-type-checkbox form-item-tripextras-gambling form-item checkbox">
<input class="control-box container-inline trip_extra form-inline form-checkbox" onclick="this.form.submit();" type="checkbox" id="edit-tripextras-gambling" name="tripextras[gambling]" value="gambling">
<label for="edit-tripextras-gambling">
<div class="checkicon-yes" data-toggle="tooltip" data-placement="top" title="" data-original-title="Gambling">
<div class="controlgambling controlpanelbutton contbut"></div>
</div>
</label>
</div>
<div class="form-type-checkbox form-item-tripextras-family form-item checkbox">
<input class="control-box container-inline trip_extra form-inline form-checkbox" onclick="this.form.submit();" type="checkbox" id="edit-tripextras-family" name="tripextras[family]" value="family">
<label for="edit-tripextras-family">
<div class="checkicon-yes" data-toggle="tooltip" data-placement="top" title="" data-original-title="Family">
<div class="controlfamily controlpanelbutton contbut hidecontbut"></div>
</div>
</label>
</div>
<div class="form-type-checkbox form-item-tripextras-exotic form-item checkbox">
<input class="control-box container-inline trip_extra form-inline form-checkbox" onclick="this.form.submit();" type="checkbox" id="edit-tripextras-exotic" name="tripextras[exotic]" value="exotic">
<label for="edit-tripextras-exotic">
<div class="checkicon-yes" data-toggle="tooltip" data-placement="top" title="" data-original-title="Exotic">
<div class="controlexotic controlpanelbutton contbut hidecontbut"></div>
</div>
</label>
</div>
<div class="form-type-checkbox form-item-tripextras-shopping form-item checkbox">
<input class="control-box container-inline trip_extra form-inline form-checkbox" onclick="this.form.submit();" type="checkbox" id="edit-tripextras-shopping" name="tripextras[shopping]" value="shopping">
<label for="edit-tripextras-shopping">
<div class="checkicon-yes" data-toggle="tooltip" data-placement="top" title="" data-original-title="Shopping">
<div class="controlshopping controlpanelbutton contbut hidecontbut"></div>
</div>
</label>
</div>
<div class="form-type-checkbox form-item-tripextras-culture form-item checkbox">
<input class="control-box container-inline trip_extra form-inline form-checkbox" onclick="this.form.submit();" type="checkbox" id="edit-tripextras-culture" name="tripextras[culture]" value="culture">
<label for="edit-tripextras-culture">
<div class="checkicon-yes" data-toggle="tooltip" data-placement="top" title="" data-original-title="Culture">
<div class="controlculture controlpanelbutton contbut hidecontbut"></div>
</div>
</label>
</div>
<div class="form-type-checkbox form-item-tripextras-romance form-item checkbox">
<input class="control-box container-inline trip_extra form-inline form-checkbox" onclick="this.form.submit();" type="checkbox" id="edit-tripextras-romance" name="tripextras[romance]" value="romance">
<label for="edit-tripextras-romance">
<div class="checkicon-yes" data-toggle="tooltip" data-placement="top" title="" data-original-title="Romance">
<div class="controlromance controlpanelbutton contbut hidecontbut"></div>
</div>
</label>
</div>
<div class="form-type-checkbox form-item-tripextras-beach form-item checkbox">
<input class="control-box container-inline trip_extra form-inline form-checkbox" onclick="this.form.submit();" type="checkbox" id="edit-tripextras-beach" name="tripextras[beach]" value="beach">
<label for="edit-tripextras-beach">
<div class="checkicon-yes" data-toggle="tooltip" data-placement="top" title="" data-original-title="Beach">
<div class="controlbeach controlpanelbutton contbut hidecontbut"></div>
</div>
</label>
</div>
</div>
</div>
<div id="cont-more">More</div>
<input type="hidden" name="form_build_id" value="form-2bAs7cV2I9h6l4aHSS5j2-0DRXSwIPR2JQ1zeGrsMFY">
<input type="hidden" name="form_token" value="Z6UGQzTTLDzYfL1tQY3mceRW8tk4DDEMsirFwQAuGgQ">
<input type="hidden" name="form_id" value="deals_control_form">
</div>
</form>
</div>