jQuery 在浏览器调整大小时从 DOM 添加/删除答案

【问题标题】：jQuery add/remove from DOM on browser resizejQuery 在浏览器调整大小时从 DOM 添加/删除
【发布时间】：2013-04-13 07:02:57
【问题描述】：

我正在使用我编写的一些 jQuery（我不太擅长 JavaScript/jQuery），它在浏览器调整大小时添加/删除 div（在本例中为 .show500、.hide500）。这是代码：

//Completely add/remove divs completely from DOM on browser resize

        $(function(){

            $(window).resize(function(){

                var win = $(this); //this = window

                if (win.width() <= 500) { 

                    $('.show500').add();

                    $('.hide500').remove();

                } else if (win.width() > 500) { 

                    $('.hide500').add();

                    $('.show500').remove();

                }

            });

        });

所以如果浏览器窗口小于或等于 500，则将 .show500 添加到 DOM 中，并从 DOM 中删除 .hide500。

然后，如果浏览器宽度大于 500，则将 .hide500 添加到 DOM 中，并从 DOM 中删除 .show500。

但是，当我使用此代码时，默认情况下会显示 .hide500 div，然后当我缩小浏览器大小时，会隐藏 .hide500 div 而 .show500 永远不会显示。然后当我展开浏览器时，两个 div 都消失了。

这里是一段jsFiddle代码：http://jsfiddle.net/XzrPR/

我将不胜感激你们的任何帮助！

【问题讨论】：

您是否知道您可以使用带有媒体查询的 css 100% 做到这一点？
css-tricks.com/resolution-specific-stylesheets
你认为.add() 是做什么的？你查了吗？在这里-api.jquery.com/add。您可能想要使用.hide() 和.show()。 .remove() 将（永久）从页面中删除元素，因此您以后无论如何都无法显示它们。

标签： javascript jquery dom browser resize

【解决方案1】：

.remove() 从 DOM 中移除元素，你无法取回它们

试试这个方法

 if (win.width() <= 500) { 
    $('.show500').show();
    $('.hide500').hide();
 } else if (win.width() > 500) { 
    $('.hide500').show();
    $('.show500').hide();
 }

working fiddle

【讨论】：

【解决方案2】：

一个非常简单的媒体查询示例，用于隐藏/显示，而不是添加/删除：

@media (mix-width:501px) and (max-width:9999px) {
    .show500    { display:none; }
    .hide500    { display:block; }
} 

@media (max-width:500px){
    .show500    { display:block; }
    .hide500    { display:none; }
}

【讨论】：

【解决方案3】：

您的else if 可以简化为else，我认为您的意思是使用.show() 而不是.add() 和.hide() 而不是.remove()：

if (win.width() <= 500) { 
    $('.show500').show();
    $('.hide500').hide();
} else {
    $('.hide500').show();
    $('.show500').hide();
}

不过，您也可以使用 pure CSS using media queries 来执行此操作：

.show500 {
    display: none;
}
.hide500 {
    display: block;
}
@media all and (max-width: 500px) {
  .show500 {
     display: block;
  }
  .hide500 {
    display: none;
  }
}

http://css-tricks.com/css-media-queries/

【讨论】：

【解决方案4】：

您想使用.show() 而不是.add()
您想使用.hide() 而不是.remove()

【讨论】：

还有.hide()，而不是.remove()