在jQuery中切換兩個div的位置

當我的頁面加載時，我的div設置爲display:block，第二個div設置爲display:none。在jQuery中切換兩個div的位置

我有一個切換開關，我想用隱藏的div替換顯示的div。

目前，我試圖做到這一點，但是當我執行開關時，我不再提及已替換的div，並且無法在它們之間切換。

我不能在HTML中將div放在另一個旁邊，因爲頁面是桌面中的不同佈局，所以我想知道是否可以切換位置並隱藏被替換的位置？

這是我的小提琴：

http://jsfiddle.net/javacadabra/mdqmto9u/

我會很感激的任何幫助。

我試圖在切換它們之前克隆divs，但那也行不通。

在我的小提琴，我想，這樣當你用正確的DIV檢查框中的左側DIV開關位置，反之亦然

來源

2015-02-09 Javacadabra

難道你只是['toggle（）']（http://api.jquery.com/toggle/）他們？順便提一句，請花時間在問題中包含代碼，不要依賴外部網站。 – 2015-02-09 16:59:48

我不能，因爲它是一個響應式佈局，在我的桌面版本上，div由中央div分隔。基本上當我低於某個屏幕寬度時，我將div隱藏在最右側。 – Javacadabra 2015-02-09 17:00:27

你想只爲更小的屏幕做這個嗎？如果是這樣，請使用CSS @media標記 – Steve 2015-02-09 17:04:35

在我的小提琴，我試圖讓它這樣得到它當你檢查框 LEFT div開關的位置與右分區，反之亦然

難道你不能這樣做嗎？

$('#check').change(function() { 
    if ($(this).is(':checked')) { 
     $('#div3').insertBefore($('#div2')); 
     $('#div1').insertAfter($('#div2')); 
    } else { 
     $('#div3').insertAfter($('#div2')); 
     $('#div1').insertBefore($('#div2')); 
    } 
});

jsFiddle example

來源

2015-02-09 17:06:13 j08691

感謝您的幫助 – Javacadabra 2015-02-09 17:12:31

這裏是另一種解決方案，只改變的內容。如果你想要改變你的類，等等，你可以調整你的佈局，將CSS應用到div的innerHTML。小提琴：http://jsfiddle.net/e9aa84ry/

$('#check').change(function(){ 
    var left = $('#div1').html(); 
    var right = $('#div3').html(); 
    $('#div1').html(right); 
    $('#div3').html(left); 
});

來源

2015-02-09 17:12:14 deebs

在jQuery中切換兩個div的位置

回答

相關問題