0

我正在使用移动优先方法构建一个响应式站点，当屏幕大于 641px 时我需要添加一个 html 元素，并在小于 641px 时删除。我遇到的问题是，当我将屏幕大小调整为大于 641 像素时，代码会产生无限数量的所述元素，而当我减小屏幕尺寸时，移除它们时会出现大量空间。

我的代码如下所示：

<script>
        $(function () {
            $(window).resize(function () {
                if ($(window).width() > 641) {
                     $('.project_nav').append('<li><a class="work_grid" href="#"><img src="images/noun_project_5193.svg"/> </a></li>');
                } else {
                    $('.work_grid').remove();
                }
            });
        });
    </script>

这是我要附加的html：

<div class="project_nav">
            <ul>
                <li><a class="up_arrow" href="#"><img src="images/noun_project_6978.svg"/> </a></li>
                <li><a class="prev_arrow" href="#"><img src="images/noun_project_6976.svg"/> </a></li>
                <li><a class="next_arrow" href="#"><img src="images/noun_project_6977.svg"/> </a></li>
            </ul>
        </div>

任何帮助是极大的赞赏！

4

2 回答 2

1

您需要跟踪该元素是否已被添加或删除。不影响 dom 的最简单方法是将其存储在变量中：

    $(function () {
        var isAdded = false;
        $(window).resize(function () {
            if (!isAdded && $(window).width() > 641) {
                 isAdded = true;
                 $('.project_nav').append('<li class="work_grid_container"><a class="work_grid" href="#"><img src="images/noun_project_5193.svg"/> </a></li>');
            } else if (isAdded && $(window).width() <= 641) {
                isAdded = false;
                $('.work_grid_container').remove();
            }
        });
    });

这样，它只会添加尚未添加的元素，并且仅当它当前存在于页面上时才会将其删除。

注意：您需要有一个选择器来li代替a! 否则你将继续添加lis。您需要完全删除您添加的内容。

于 2013-09-03T18:25:28.080 回答
0

正在发生的事情是，当您调整大小时，实际上是在调整一大堆的大小，添加了太多元素。你想要做的是添加某种Timeout. 这是一个例子。

$(window).resize(function () {
    clearTimeout(window.refresh_size);
    window.refresh_size = setTimeout(function () {
        //Do stuff
    }, 100);

这样，它只会在您停止调整页面大小至少 100 毫秒后执行您的代码。

于 2013-09-03T18:12:04.653 回答