1

我似乎无法为我使用 detach() 分离的元素添加附加功能

基本上我想要做的是根据屏幕尺寸（大于 900 像素）从 DOM 中删除一些图像并将它们添加回来（小于 900 像素）。我正在使用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);
    }
});

分离似乎正在工作，但是当满足第二个条件时，什么也没有发生。难道我做错了什么？

代表我编辑愚蠢的错误我只是在查询匹配函数中声明变量“幻灯片”，因此它不适用于 unmatch 函数。

这现在有效：

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

我似乎也可以使用 remove() 而不是 detach()

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 回答