根據屏幕寬度交換div位置

我正在嘗試創建一個響應網站，並希望兩個div根據屏幕寬度（在開始和調整大小時）交換位置。根據屏幕寬度交換div位置

我已經做了一些研究，並嘗試了幾個選擇，但沒有運氣。我相當新的JQuery和JS，所以任何幫助將不勝感激。

HTML

<div id="div1">facebook</div> 
<br/> 
<div id="div2"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSFjZm7TgmvK8lEfSkzytyCuE1ZDE1WdexDyj7eRLSPHfexJQruR8uIGfY"/></div>

jQuery的

$(document).ready(function(){ 
div1 = $('#div1'); 
div2 = $('#div2'); 
tdiv1 = div1.clone(); 
tdiv2 = div2.clone(); 
.resize() 
}); 

$(window).resize(function() { //Fires when window is resized 
    if($(window).width() < 800){ 
    div1.replaceWith(tdiv2); 
    div2.replaceWith(tdiv1);} 
    else{ 
    div1.replaceWith(tdiv1); 
    div2.replaceWith(tdiv2);} 
    });

來源

2016-09-04 Joemo

實現這一目標的最簡單的方法就是把它的包裝中的包裝和append()和prepend()的div：

JS Fiddle

HTML

<div class="wrapper"> 
    <div id="div1">facebook</div> 
    <br/> 
    <div id="div2"> 
    <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSFjZm7TgmvK8lEfSkzytyCuE1ZDE1WdexDyj7eRLSPHfexJQruR8uIGfY" /> 
    </div> 
</div>

jQuery的

$(window).on('load resize', function() { //Fires when window is loaded or resized 
    var div1 = $('#div1'); 
    var div2 = $('#div2'); 
    var wrapper = $('.wrapper'); 

    if ($(window).width() < 800) { 
    wrapper.prepend(div1).append(div2); // move div 1 to start & div2 to end 
    } else { 
    wrapper.prepend(div2).append(div1); // move div 2 to start & div 1 to end 
    } 
});

而如果你想要把它寫在以不同的方式：

JS Fiddle

$(window).on('load resize', function() { //Fires when window is loaded or resized 
    var windowWidth = $(window).width(), 
     div1 = $('#div1'), 
     div2 = $('#div2'), 
     first = windowWidth < 800 ? div1 : div2, 
     last = windowWidth >= 800 ? div2 : div1; 

     $('.wrapper').prepend(first).append(last); 
});

來源

2016-09-04 15:20:54

謝謝你的幫助！真的很感激它。 – Joemo

試試這個：

<script type="text/javascript"> 

    var run = false; 

    $(window).on("resize",function(){ 

     if($(window).width()<800 && !run) { 

      $("#div2").remove(); 

      $('<div id=div2><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSFjZm7TgmvK8lEfSkzytyCuE1ZDE1WdexDyj7eRLSPHfexJQruR8uIGfY"/></div>').insertBefore($("#div1")); 

      run = !run; 

     } 

     else if($(window).width() >= 800 && run){ 

      $("#div1").remove(); 

      $('<div id=div1>facebook</div>').insertBefore($("#div2")); 

      run = !run; 

     } 
    }) 
</script>

最終代碼：

注意：要運行片段時，單擊整頁。

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
</head> 
 
<body> 
 
    <div id="div1">facebook</div> 
 
<br/> 
 
    
 
<div id="div2"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSFjZm7TgmvK8lEfSkzytyCuE1ZDE1WdexDyj7eRLSPHfexJQruR8uIGfY"/></div> 
 
    
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    
 
<script type="text/javascript"> 
 
    
 
    var run = false; 
 
    
 
    $(window).on("resize",function(){ 
 
     
 
     if($(window).width()<800 && !run) { 
 
      
 
      $("#div2").remove(); 
 
      
 
      $('<div id=div2><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSFjZm7TgmvK8lEfSkzytyCuE1ZDE1WdexDyj7eRLSPHfexJQruR8uIGfY"/></div>').insertBefore($("#div1")); 
 
      
 
      run = !run; 
 
       
 
     } 
 
     
 
     else if($(window).width() >= 800 && run){ 
 
      
 
      $("#div1").remove(); 
 
      
 
      $('<div id=div1>facebook</div>').insertBefore($("#div2")); 
 
      
 
      run = !run; 
 
       
 
     } 
 
    }) 
 
    </script> 
 
    </body> 
 
</html>

注意：要運行片段時，單擊整頁。

來源

2016-09-04 15:51:09 Ehsan

謝謝你的幫助！真的很感激它。 – Joemo

根據屏幕寬度交換div位置

回答

相關問題