1

detach() でデタッチしている要素に対して追加機能を取得できないようです

基本的に私がやりたいことは、画面サイズ (900px より大きい) に基づいて DOM からいくつかの画像を削除し、それらを元に戻す (900px より小さい) ことです。enquire.jsを使用してブレークポイントを処理していますが、削除された要素の挿入を適切に実装できません。

html は次のとおりです。

<div class="mobile-slides">
  <a><img src="image.jpg" /></a>
  <a><img src="image2.jpg" /></a>
  <a><img src="image2.jpg" /></a>
</div>

使用しているjsは次のとおりです。

enquire.register("screen and (min-width: 900px)", {
    match : function() {
        var slides = $('.mobile-slides a').detach();
    },
    unmatch : function() {
        $('.mobile-slides').append(slides);
    }
});

デタッチは機能しているように見えますが、2 番目の条件が満たされると何も起こりません。私は何か間違ったことをしていますか？

編集 私に代わって愚かな間違い私は、照会一致関数内で変数「スライド」を宣言しただけだったので、不一致関数では利用できませんでした。

これは機能するようになりました：

var slides = $('.mobile-slides a');
enquire.register("screen and (min-width: 900px)", {
    match : function() {
        $('.mobile-slides a').detach();
    },
    unmatch : function() {
        $('.mobile-slides').append(slides);
    }
});

detach() の代わりに remove() を使用することもできます

4

1 に答える 1

2 
slides.appendTo( '.mobile-slides' );

ボタンクリックのサンプルコード、

var slides;
$( "button" ).click(function() {
  if ( slides ) {
    slides.appendTo( ".mobile-slides" );
    slides = null;
  } else {
    slides = $('.mobile-slides a').detach();
  }
});
于 2013-09-04T04:41:47.157 に答える