追加反应

Question

我将我的元素从.copyfilterArea改为.copyfilter .container-margin以响应，如果我的分辨率小于768像素，然后移动我的元素..到目前为止，它没问题，功能正常工作，但如果我的分辨率大于768像素，然后把我的div回到原来的位置。只有这一部分我不能做，我怎么能改变我的代码，把div放回原来的位置？我试图追加，但没有改变

$(function() { 
 
    var flag; 
 
    $(window).resize(function() { 
 
     var bodyWidth = $(window).width(); 
 
     console.log(bodyWidth) 
 
     if (flag !== false && bodyWidth < 768) { 
 
      //move the element to new location 
 
      $('.copyFilterArea').appendTo('.copyFilter .container-margin'); 
 
      flag = false; 
 
     } else if (flag !== true && bodyWidth >= 768) { 
 
      //put it back to original location 
 
      console.log('more') 
 
      flag = true; 
 
     } 
 
    }).resize(); 
 
});

.copyFilter .container-margin{ 
 
    padding:20px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div class="copyFilterArea"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo itaque voluptates quasi incidunt atque aliquam neque ducimus quibusdam quo fuga provident blanditiis sint saepe, culpa ipsam a quae magnam pariatur quidem ad. Numquam repudiandae rerum aliquid, reiciendis minus ipsa nostrum esse quam deserunt in! Odit cum incidunt molestias tempora accusamus doloribus, quidem saepe, iusto assumenda ad. Consequuntur voluptatibus earum voluptate veniam aspernatur, sapiente, molestias, voluptates officia perspiciatis nesciunt ducimus maiores excepturi iure ratione magnam eligendi, quia quisquam porro. Nobis explicabo, voluptatibus nulla a delectus aut dolorum excepturi distinctio. Similique veniam maxime fugiat deleniti ipsam autem in itaque at magni blanditiis.</p> 
 
</div> 
 

 

 
<div class="copyFilter"> 
 
    <div class="container-margin"> 
 
    <h1>COPY CONTENT WİLL BE HERE</h1> 
 
    </div> 
 
</div>

Answer 1

使用prependTo放置文本的初始状态：

$(function() { 
 
    var flag; 
 
    $(window).resize(function() { 
 
     var bodyWidth = $(window).width(); 
 
     console.log(bodyWidth) 
 
     if (flag !== false && bodyWidth < 768) { 
 
      //move the element to new location 
 
      $('.copyFilterArea').appendTo('.copyFilter .container-margin'); 
 
      flag = false; 
 
     } else if (flag !== true && bodyWidth >= 768) { 
 
      //put it back to original location 
 
      $('.copyFilterArea').prependTo('.copyFilter .container-margin'); 
 
      console.log('more') 
 
      flag = true; 
 
     } 
 
    }).resize(); 
 
});

.copyFilter .container-margin{ 
 
    padding:20px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div class="copyFilterArea"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo itaque voluptates quasi incidunt atque aliquam neque ducimus quibusdam quo fuga provident blanditiis sint saepe, culpa ipsam a quae magnam pariatur quidem ad. Numquam repudiandae rerum aliquid, reiciendis minus ipsa nostrum esse quam deserunt in! Odit cum incidunt molestias tempora accusamus doloribus, quidem saepe, iusto assumenda ad. Consequuntur voluptatibus earum voluptate veniam aspernatur, sapiente, molestias, voluptates officia perspiciatis nesciunt ducimus maiores excepturi iure ratione magnam eligendi, quia quisquam porro. Nobis explicabo, voluptatibus nulla a delectus aut dolorum excepturi distinctio. Similique veniam maxime fugiat deleniti ipsam autem in itaque at magni blanditiis.</p> 
 
</div> 
 

 

 
<div class="copyFilter"> 
 
    <div class="container-margin"> 
 
    <h1>COPY CONTENT WİLL BE HERE</h1> 
 
    </div> 
 
</div>

Answer 2

如果您遇到任何问题与追加和删除特定元素在运行时DOM然后替代您可以用隐藏/显示逻辑来处理它的元素复制如下：

$(function() { 
 
    var flag; 
 
    $(".subFilterArea").hide(); 
 
    $(window).resize(function() { 
 
     var bodyWidth = $(window).width(); 
 
     console.log(bodyWidth) 
 
     if (flag !== false && bodyWidth < 768) { 
 
      //move the element to new location 
 
      $(".mainFilterArea").hide(); 
 
      $(".subFilterArea").show(); 
 
      flag = false; 
 
     } else if (flag !== true && bodyWidth >= 768) { 
 
      //put it back to original location 
 
      $(".mainFilterArea").show(); 
 
      $(".subFilterArea").hide(); 
 
      flag = true; 
 
     } 
 
    }).resize(); 
 
});

.copyFilter .container-margin{ 
 
    padding:20px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div class="copyFilterArea mainFilterArea"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo itaque voluptates quasi incidunt atque aliquam neque ducimus quibusdam quo fuga provident blanditiis sint saepe, culpa ipsam a quae magnam pariatur quidem ad. Numquam repudiandae rerum aliquid, reiciendis minus ipsa nostrum esse quam deserunt in! Odit cum incidunt molestias tempora accusamus doloribus, quidem saepe, iusto assumenda ad. Consequuntur voluptatibus earum voluptate veniam aspernatur, sapiente, molestias, voluptates officia perspiciatis nesciunt ducimus maiores excepturi iure ratione magnam eligendi, quia quisquam porro. Nobis explicabo, voluptatibus nulla a delectus aut dolorum excepturi distinctio. Similique veniam maxime fugiat deleniti ipsam autem in itaque at magni blanditiis.</p> 
 
</div> 
 

 

 
<div class="copyFilter"> 
 
    <div class="container-margin"> 
 
    <h1>COPY CONTENT WİLL BE HERE</h1> 
 
    <div class="copyFilterArea subFilterArea"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo itaque voluptates quasi incidunt atque aliquam neque ducimus quibusdam quo fuga provident blanditiis sint saepe, culpa ipsam a quae magnam pariatur quidem ad. Numquam repudiandae rerum aliquid, reiciendis minus ipsa nostrum esse quam deserunt in! Odit cum incidunt molestias tempora accusamus doloribus, quidem saepe, iusto assumenda ad. Consequuntur voluptatibus earum voluptate veniam aspernatur, sapiente, molestias, voluptates officia perspiciatis nesciunt ducimus maiores excepturi iure ratione magnam eligendi, quia quisquam porro. Nobis explicabo, voluptatibus nulla a delectus aut dolorum excepturi distinctio. Similique veniam maxime fugiat deleniti ipsam autem in itaque at magni blanditiis.</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

$(function() { 
    var flag; 
    var $copyFilterArea = $('.copyFilterArea') 
    $(window).resize(function() { 
     var bodyWidth = $(window).width(); 
     console.log(bodyWidth) 
     if (flag !== false && bodyWidth < 768) { 
      //move the element to new location 
      $copyFilterArea.appendTo($('.copyFilter .container-margin')); 
      flag = false; 
     } else if (flag !== true && bodyWidth >= 768) { 
     //put it back to original location 
      if($("body").children(".copyFilterArea").length<=0){ 
      $copyFilterArea.prependTo($('body')) 
      } 
      console.log('more') 
      flag = true; 
     } 
    }).resize(); 
});