3

我正在尝试替换小屏幕尺寸的 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();

谢谢。

4

4 回答 4

3

我建议看看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 来创建它们。

有关更多信息，请参阅文档。

于 2013-04-30T09:07:42.570 回答
0

replaceWith 函数正在更改 DOM 结构并替换组件中的任何内容；因此，它将不再了解以前的情况。

您可以在进行替换之前在全局变量中捕获 $('.LatestNews') 的 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-30T08:53:12.463 回答
0

我会推荐这样的东西。

//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-30T09:33:18.227 回答
-1 
var elem = $(".patience")

function defineContent () {
    
    if (window.innerWidth < 650){  
        elem.children().replaceWith('<h5>Small header</h5>')
    }else{                    
        elem.children().replaceWith('<h3>Slightly bigger header</h3>');
    }
}

$(window).resize(defineContent);     //defineContent without brackets!
于 2020-11-17T09:32:22.823 回答