自己的jQuery插件只工作在第一个选择器

Own jQuery plugin only working on first selector

本文关键字:第一个 选择器 工作 jQuery 插件 自己的      更新时间:2023-09-26

我已经试着写了我的第一个插件。这是一个简单的jQuery插件,可以根据屏幕宽度重新排序DOM。如果插件在单个选择器上使用,如$("#box3").domorder();,它会按预期工作。

但是,如果使用多个选择器来调用函数,或者函数被多次调用,则该函数只在它到达的第一个选择器上工作一次。

我有each(function(){})迭代每个选择器,但我显然错过了一些东西。

jsFiddle

(function($) {
    "use strict";
    $.fn.domorder = function(options) {
        var settings = {
            breakpoint : 960,
            targetContainer : $(this).parent(),
            targetPosition : "start"
        };
        if (options) {
            $.extend(settings, options);
        }
        return this.each(function(i, el) {
            /* remember selector's original order position */
            var originalLocation = {};
            if ($(el).prev().length) {
                /* not originally first child */
                originalLocation.prev = $(el).prev()[0];
            } else {
                /* originally a first child */
                originalLocation.parent = $(el).parent()[0];
            }
            var initiatedomorder = function() {
                var winW = $(window).width();
                if (winW < settings.breakpoint && !$("body").hasClass("domorder-reordered")) {
                    /* dom the order of the item */
                    if (settings.targetPosition === "start") {
                        $(el).prependTo(settings.targetContainer[0]);
                    } else {
                        $(el).appendTo(settings.targetContainer[0]);
                    }
                    $("body").addClass("domorder-reordered");
                } else if (winW >= settings.breakpoint && $("body").hasClass("domorder-reordered")) {
                    /* return the reordered item back into the orignal flow */
                    if (originalLocation.parent) {
                        /* element was a first child */
                        $(originalLocation.parent).prepend(el);
                    } else {
                        /* element was not a first child */
                        /* add a line break to preserve inline-block spacing */
                        $(originalLocation.prev).after(el).after("'n");
                    }
                    $("body").removeClass("domorder-reordered");
                }
            };
            initiatedomorder();
            $(window).resize(function() {
                initiatedomorder();
            });
        });
    };
}(jQuery));

$("body").addClass("domorder-reordered");会导致问题,因为只有第一次迭代才会进行排序。

也许你应该把$("body")改成$(el.parentNode)

check this jsfield

在循环的第一次迭代时将类添加到主体中。所以在第二次迭代中,主体有类,而不是在排序代码中。你必须重新考虑addClass和removeClass的位置

并将以下代码放在每个

之外
$(window).resize(function() {
    initiatedomorder();
});