根据屏幕尺寸替换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();

感谢。

来源

2013-04-30 Karlgoldstraw

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

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实例时才有效;如果你正在处理多个这不起作用。

来源

2013-04-30 08:53:12 IpponSolutions

嗨，感谢您的快速响应，我粘贴了这个，但它不工作不幸。它确实做替换仍然，但不改回它 – 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创建它们两个版本。

请参阅文档以获取更多信息。

来源

2013-04-30 09:07:42 Calvin

嗨加尔文，再次感谢。我没有正确解释自己 - 我不允许更改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; 
    }; 
}

这不是有史以来最好的事情。本来可以做得更好，但它会完成这项工作。

来源

2013-04-30 09:33:18 Calvin

根据屏幕尺寸替换HTML

回答

相关问题