根据屏幕尺寸替换HTML
我试图用小屏幕尺寸替换HTML内容,然后在窗口再次变大时将其替换。我的代码如下,但我如何得到它来消除变化?根据屏幕尺寸替换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();
感谢。
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();
注:这只有在您的网页上有1个.LatestNews实例时才有效;如果你正在处理多个这不起作用。
嗨,感谢您的快速响应,我粘贴了这个,但它不工作不幸。它确实做替换仍然,但不改回它 – Karlgoldstraw 2013-04-30 09:06:50
我没有自己运行;只是在您的代码片段中添加了一个示例。我建议调试它,因为它是相当直接的 - 除非有一些重新加载... – IpponSolutions 2013-04-30 14:57:27
我建议看看responsejs.com。它提出了一些基于view-port替代内容的好方法,并且是解决这个问题的一个很好的解决方案。
你想要做的第一件事是定义你的断点。像这样的东西可以工作:
(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] });
})();
接下来,您可以使用它的自定义数据属性来放置标记中的内容。例如
这远远更多的语义,你可以在你的标记,而不是使用JS创建它们两个版本。
请参阅文档以获取更多信息。
嗨加尔文,再次感谢。我没有正确解释自己 - 我不允许更改HTML标记,但我可以访问外部.js文件。所以,虽然我看到插件的好处(我将在以后再次使用它),但这次我不能手动更改DOM,只能在飞行中。 – Karlgoldstraw 2013-04-30 09:11:24
啊该死的,我会编辑我的答案,使其更通用,让其他人谁面临的问题没有你的限制。现在就为你写一个新的。 – Calvin 2013-04-30 09:13:43
谢谢卡尔文,非常感谢:-) – Karlgoldstraw 2013-04-30 09:18:10
我会推荐这样的东西。
//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;
};
}
这不是有史以来最好的事情。本来可以做得更好,但它会完成这项工作。
http://responsejs.com/如果感兴趣,可以做得很好。它还允许您在标记中指定两个版本,这比语言更具语义。 – Calvin 2013-04-30 08:48:00
感谢Calvin,但我只是在寻找纯jQuery,我无法在我正在编写的网站上插入插件 – Karlgoldstraw 2013-04-30 08:52:00
您可以将压缩的代码复制到您的脚本文件中,或者直接复制到脚本标记的页面中。它仍然是纯粹的“jQuery”(JS)。 只需复制并粘贴到某处:http://airve.github.io/js/response/response.min.js – Calvin 2013-04-30 08:54:56