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

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

jQuery多个单击实例

1 个答案: