Question

我正在使用一些我写的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/

我很感激你们的帮助！

Answer 1

您的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/

Answer 2

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

Answer 3

一个非常简单的Media Query示例，用于隐藏/显示，不添加/删除：

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

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

Answer 4

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

试试这种方式

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

working fiddle

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

4 个答案: