Question

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

感谢。

Answer 1

我建议您查看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] });

   })();

接下来，您可以使用它的自定义数据属性将其放入标记中的内容中。 e.g。

<div data-r481="
     This content will be shown over 480 pixels.
 ">
 This is your default content
 </div>

这更具语义性，因为您可以在标记中使用这两个版本，而不是使用JS来创建它们。

有关详细信息，请参阅文档。

Answer 2

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();

N.B。只有在您的页面上有1个.LatestNews实例时，这才有效;如果你正在处理多个这将无效。

Answer 3

我会推荐这样的东西。

//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;
    };
}

这不是最好的事情。可能结构更好，但它会完成这项工作。

Answer 4

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!

根据屏幕大小替换HTML

4 个答案: