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

このようなものをお勧めします。

//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 に答える
0

replaceWith 関数は DOM 構造を変更し、コンポーネント内のコンテンツを置き換えます。したがって、以前に何があったかを知ることはできなくなります。

置換を行う前に $('.LatestNews') の innerHTML コンテンツをグローバル var にキャプチャし、画面のサイズが変更されたときに元に戻すことができます。

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 つある場合にのみ機能します。複数を扱っている場合、これは機能しません。

于 2013-04-30T08:53:12.463 に答える