JQuery - 不隐藏正确数量的元素

时间:2014-11-18 09:01:52

标签: javascript jquery

我有一个用于生成按钮控制面板的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');    
    }
}

enter image description here

以下是按钮部分的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>

0 个答案:

没有答案