0

在我正在编写的 jQuery 插件中，我通过向发生事件的元素的父元素添加一个类来引用事件发生的事实。这得到了很好的补充。但是，在删除该类时，该类不会删除。

这是一个触发类添加/删除的窗口大小更改事件。

我创建了一个 jsFiddle，当您更改屏幕宽度时，您可以在其中看到“重新定位”类适用，但在屏幕放大时不会被删除，就像它应该的那样。

jsFiddle

应用和删除类的函数：

        var init = function() {
            var winW = $(window).width();

            if (winW < settings.breakpoint && !$(el.parentNode).hasClass("relocated")) {
                /* change the order of the item */

                if (settings.targetPosition === "start") {
                    $(el).prependTo(settings.targetContainer[i]);
                } else {
                    $(el).appendTo(settings.targetContainer[i]);
                }

                $(el.parentNode).addClass("relocated");
            } else if (winW >= settings.breakpoint && $(el.parentNode).hasClass("relocated")) {
                /* return the moved item back into the orignal position */
                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");
                }

                $(el.parentNode).removeClass("relocated");
            }
        };
4

1 回答 1

1

在将元素重新定位回其原始位置后，您将删除该类。如果您将其移至搬迁之前，则可以正常工作。

        } else if (winW >= settings.breakpoint && $(el.parentNode).hasClass("relocated")) {
            // remove the class here
            $(el.parentNode).removeClass("relocated");

            /* return the moved item back into the orignal position */
            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");
            }

        }

如果等到恢复 DOM 之后，父元素将是与添加类的元素不同的元素。

您可能需要引入计时器机制来减少浏览器的负载。浏览器非常积极地触发“resize”事件，因此在“resize”事件处理程序中做任何大量工作都会使事情变得非常缓慢。你可以做的是引入一个计时器：

$(window).resize(function() {
  var timer = null;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(init, 100);
  };
}());
于 2013-07-20T14:44:29.297 回答