Question

我正在使用移动优先方法构建响应式网站，我需要在屏幕大于641px时添加html元素，并在更少时删除。我遇到的问题是，当我调整大于641px的屏幕大小时，代码会生成无限数量的所述元素，当我减小屏幕大小时，移除它们时会有大量的空间。

我的代码如下：

<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>

非常感谢任何帮助！

Answer 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设置选择器！否则，您将继续添加li s。您需要完全删除添加的内容。

Answer 2

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

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

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

使用jquery删除特定屏幕宽度的元素？

2 个答案: