我试图取代小屏幕尺寸的HTML内容，然后替换它当使窗口再次变大。 我的代码下面的作品，但我如何得到它删除更改？
这是我到目前为止的代码：
$(window).resize(function() {
if (window.innerWidth < 480) {
$('.LatestNews').replaceWith('<h3><a href="">News Link</a></h3>');
} else if (window.innerWidth > 480) {
// Change back to original .LatestNews
}
}).resize();
谢谢。
我会建议在看看responsejs.com 。 它配备了基于替代视口内容的一些伟大的方式，是一个优雅的解决这个问题。
你想要做的第一件事是定义你的断点。 像这样的东西会工作：
(function() {
Response.create({ mode: 'markup', prefix: 'r', breakpoints: [0,320,481,641,961,1020,1281] });
Response.create({ mode: 'src', prefix: 'src', breakpoints: [0,320,481,641,961,1020,1281] });
})();
接下来你可以使用它的自定义数据属性在标记您的内容的地方。 例如
<div data-r481="
This content will be shown over 480 pixels.
">
This is your default content
</div>
这远远更多的语义，你可以在你的标记，而不是使用JS创建它们两个版本。
查看更多信息的文档。
该replaceWith函数改变DOM结构和更换您的组件中的任何内容; 因此，将不再有以前什么有什么知识。
你可以捕捉$的innerHTML内容（”办事指南。）在一个全局变量做替换之前，再改回为你的屏幕大小调整：
var originalContent = '';
$(window).resize(function() {
if (window.innerWidth < 480) {
originalContent = $('.LatestNews').innerHTML;
$('.LatestNews').replaceWith('<h3><a href="">News Link</a></h3>');
} else if (window.innerWidth > 480) {
// Change back to original .LatestNews
$('.LatestNews').innerHTML = originalContent;
}
}).resize();
注意，如果有您的网页上.LatestNews的1个实例这只会工作; 如果你正在处理多这是不行的。
我建议这样的事情。
//setup some variables. You only need to change the top two and this code should work on your site.
var parentElem = $('div'),
bigContent = "<p>this is some dummy content</p>",
smallContent = parentElem.html(),
s = 0;
//call your function every time the browser is re-sized. The arguments are: 1. the parent of the content you want to change, 2. the original content, 3. the content you want to show on larger screens
$(window).resize(function(){
replaceContent(parentElem, smallContent, bigContent);
});
function replaceContent(parent, small, big){
// check if a breakpoint has been "crossed". I'm using the 's' variable to check if we have already run at this breakpoint to prevent needlessly repeating the function every time the user re-sizes.
if (window.innerWidth < 481 && s === 1 ) {
parent.children().remove();
parent.html(small);
s = 0;
} else if ( window.innerWidth > 480 && s === 0) {
parent.children().remove();
parent.html(big);
s = 1;
};
}
这是不是有史以来最好的事情。 本来是结构更合理，但它会做的工作。
