我可以编写第一个插件。这是一个简单的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 jsfiddle
关于javascript - 自己的jQuery插件仅适用于第一个选择器,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/17161646/