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

Обратите внимание, что я также немного изменил логику с использованием троичного выражения, чтобы сделать код короче.