Question

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

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

我创建了一个jsFiddle，你可以看到当你改变屏幕宽度时，“relocated”类适用，但是当屏幕被放大时不会被删除，就像它应该的那样。

应用和删除类的函数：

        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");
            }
        };

Answer 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之后，父级将与您添加该级别的元素不同。

您可能需要引入计时器机制来减少浏览器的负载。浏览器会激活“重新调整”事件非常，因此在“调整大小”事件处理程序中执行任何大量工作都会使事情变得非常缓慢。你可以做的是介绍一个计时器：

$(window).resize(function() {
  var timer = null;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(init, 100);
  };
}());

removeClass（）无法处理窗口大小调整

1 个答案: