Question

我正在尝试构建一个jQuery插件，以便为我的选择输入设置样式。到目前为止它运作良好。

在小提琴上，我用背景颜色标记了可点击区域。当你单击其中任何一个时，如果它没有它，它们应该得到一个类，如果已经有类，则删除它。

这仅适用于某些项目，而不适用于其他项目，我注意到这是因为在某些项目上添加了该类，然后直接删除。

请有人指出我正确的方向。不确定问题是什么。

HTML

<section>
    <h1>Select with icons</h1>
    <select class="select-image" data-icons="true">
        <option value="option 1" data-image-class="o-1">Option 1</option>
        <option value="option 2" data-image-class="o-2" selected="selected">Option 2</option>
        <option value="option 3" data-image-class="o-3">Option 3</option>
        <option value="option 4" data-image-class="o-4">Option 4</option>
        <option value="option 5" data-image-class="o-5">Option 5</option>
        <option value="option 6" data-image-class="o-6">Option 6</option>
        <option value="option 7" data-image-class="o-7">Option 7</option>
        <option value="option 8" data-image-class="o-8">Option 8</option>
        <option value="option 9" data-image-class="o-9">Option 9</option>
        <option value="option 10" data-image-class="o-10">Option 10</option>
    </select>
</section>

<section>
    <h1>Select without icons</h1>
    <select class="select-no-image">
        <option value="option 1">Option 1</option>
        <option value="option 2">Option 2</option>
        <option value="option 3">Option 3</option>
        <option value="option 4">Option 4</option>
        <option value="option 5">Option 5</option>
        <option value="option 6">Option 6</option>
        <option value="option 7">Option 7</option>
        <option value="option 8" selected="selected">Option 8</option>
        <option value="option 9">Option 9</option>
        <option value="option 10">Option 10</option>
    </select>
</section>

JS

; (function($, window, document, undefined) {
'use strict';

var hasIcon = false;
var activeClass = '';
var count = 1;

$.fn.extend({
    select: function(options) {
        var defaults = {
            activeClass : 'cp-select-active'
        }

        options = $.extend(defaults, options);

        return this.each(function() {
            var o = options;

            function setupSelect(el) {
                var $this = $(el);
                var icons = $this.data('icons') ? hasIcon = true : hasIcon = false;

                if(!Modernizr.touch) {

                    $this.attr('data-id', 'select-' + count++);

                    if(hasIcon) {
                        var selected = $this.find(':selected');
                        var selectContainer = '<div class="cp-select"><span>'
                                            + '<i class="' + selected.data('image-class') 
                                            + '"></i>' + selected.text() 
                                            + '</span><ul class="cp-select-dropdown"></ul></div>';

                        $this.after(selectContainer);
                        $this.addClass('hide');

                        buildList($this, true);
                        referenceListToSelect($this, count - 1);
                    } else {
                        var selected = $this.find(':selected');
                        var selectContainer = '<div class="cp-select"><span>' 
                                            + selected.text() 
                                            + '</span><ul class="cp-select-dropdown"></ul></div>';

                        $this.after(selectContainer);
                        $this.addClass('hide');

                        buildList($this, false);
                        referenceListToSelect($this, count - 1);
                    }
                }
            }

            function buildList(el, bool) {
                var element = $(el);
                var select = element.nextUntil('ul.cp-select-dropdown');

                element.find('option').each(function() {
                    if(bool) {
                        var icon = '<i class="' + $(this).data('image-class') + '"></i>';
                    } else {
                        var icon = '';
                    }
                    var listItem = '<li class="cp-select-list" data-value="' 
                                + $(this).attr('value') + '"><a href="#">' + icon
                                + $(this).text() + '</a></li>';

                    select.find('ul.cp-select-dropdown').append(listItem);
                });
            }

            function referenceListToSelect(element, number) {
                var select = element.nextUntil('ul.cp-select-dropdown');
                select.find('li.cp-select-list').each(function() {
                    $(this).attr('data-item-of', number);
                });
            }

            function openSelect() {
                $('.cp-select').on('click','span', function() {
                    $(this).parent().toggleClass(o.activeClass);
                });
            }

            function makeSelection() {
                $('li.cp-select-list a').on('click', function() {

                }); 
            }

            setupSelect(this);
            openSelect();
        });
    }
});

})(jQuery, window, document);

小提琴 https://jsfiddle.net/w0jggjpb/11/

更新小提琴 https://jsfiddle.net/w0jggjpb/16/

Answer 1

您的点击事件被绑定在.each()圈内。

return this.each(function() { //...

这就是为什么它只会触发两次前导.cp-select，因为当你的循环运行2次时，第一个元素会被绑定两次到click事件。

为了给您一个简化的解决方案，请将click事件委托给例如正文（这可能不是最佳做法）或您不动态创建的任何其他容器。

$("body").on("click", ".cp-select span", function(){ //....

做一个你知道你只做过一次的地方。

点击某些项目两次，而不是其他项目

1 个答案: