jQuery多个点击实例

Question

我做了一个自定义选择框，当单击一个按钮时可以正常打开。但是，当单击一个按钮时，在同一页面上有多个选择框，所有的选择框都打开。有没有办法做到这一点，而不是每个选择框应用单独的类和多个功能？

这是我的HTML。

<div class="select-box-wrap"> 
    <select class="select-box" name="mbpanel_layout_section_options[site_layout]"> 
     <option value="1" <?php if(1 == $options['site_layout']) echo 'selected'; ?>>Left Sidebar</option> 
     <option value="2" <?php if(2 == $options['site_layout']) echo 'selected'; ?>>Right Sidebar</option> 
     <option value="3" <?php if(3 == $options['site_layout']) echo 'selected'; ?>>Three Column</option> 
     <option value="4" <?php if(4 == $options['site_layout']) echo 'selected'; ?>>Full Width</option> 
    </select> 
    <input type="button" class="select-click"/> 
</div> 

<div class="select-box-wrap"> 
    <select class="select-box" name="mbpanel_layout_section_options[post_layout]"> 
     <option value="1" <?php if(1 == $options['post_layout']) echo 'selected'; ?>>Left Thumbnail</option> 
     <option value="2" <?php if(2 == $options['post_layout']) echo 'selected'; ?>>Right Thumbnail</option> 
     <option value="3" <?php if(3 == $options['post_layout']) echo 'selected'; ?>>Top Thumbnail</option> 
    </select> 
    <input type="button" class="select-click"/> 
</div> 

这里是jQuery。

(function($){ 
    $(".select-click").click(function() { 
     var size = $('.select-box option').size(); 

     if (size != $(".select-box").prop('size')) { 
      $(".select-box").prop('size', size); 
      $(".select-box").addClass("select-open"); 
     } else { 
      $(".select-box").prop('size', 1); 
      $(".select-box").removeClass("select-open"); 
     } 
    }) 
})(jQuery); 

，这里是一个JSFiddle

Answer 1

您需要使用DOM遍历查找与点击的按钮，而不是使用类选择影响元素的所有实例.select-box。试试这个：

(function($) { 
    $(".select-click").click(function() { 
     var $selectBox = $(this).prev('.select-box'); 
     var size = $selectBox.find('option').size(); 
     var sizeDifference = size != $selectBox.prop('size'); 
     $selectBox.prop('size', sizeDifference ? size : 1).toggleClass("select-open", sizeDifference); 
    }) 
})(jQuery); 

Working example

请注意，我还使用了三元表达的改变逻辑稍微使代码更短。