使用jQuery移動元素

我有一個帶有可擴展鏈接的邊欄。當它們擴展到某個點時，我想將一些文本從一個div移動到另一個div（紅色到藍色）。當我展開並摺疊鏈接時，在某個時候，我打算移動的文本就消失了。使用jQuery移動元素

有兩個問題：

文本應該移動到藍格的時候我擴大，回沖，當我崩潰
文本完全消失，不會移動到其他分區。

這裏是我的html：

<div id="sidebar"> 
    <div> 
    <a href="#" class="cal-title">Test 1</a> 
    <p class="cal-desc">Lorem ipsum</p> 
    </div> 
    <div> 
    <a href="#" class="cal-title">Test 2</a> 
    <p class="cal-desc">Lorem ipsum</p> 
    </div> 
    <div> 
    <a href="#" class="cal-title">Test 3</a> 
    <p class="cal-desc">Lorem ipsum</p> 
    </div> 
</div> 

<div class="red"> 
    <p>Just some random text</p> 
</div> 

<div class="blue"> 
</div>

這裏是jQuery的/ js代碼：

$(document).ready(function() { 
    var isExtended = false; 
    function placeTiles() { 
     // When to move content from .red to .blue 
     if ($('#sidebar').height() > 150 && isExtended == false) { 
      $('.red').appendTo($('.blue')); 
      isExtended = true; 
     // When to move content from .red to .blue 
     } else if ($('#sidebar').height() <= 150 && isExtended == true) { 
      $('.blue').appendTo($('.red')); 
      isExtended = false; 
     } 
    } 

    $('.cal-desc').hide(); 
    // Check how thing are on init 
    placeTiles(); 

    $('.cal-title').click(function() { 
    $(this).siblings('.cal-desc').toggle(); 
    placeTiles(); 
    }); 
});

這裏是我的jsfiddle的鏈接。

我真的是一個javascript新手，所以任何建議我的代碼是最受歡迎的！

來源

2013-03-06 Niclas Nilsson

重讀你的QI仍然很難猜測你有什麼實際上是試圖完成... – 2013-03-06 21:29:47

有人得了儘管我的不好解釋。也許我明天爲將來的訪問者編輯它。但我得到了我的答案。感謝您指出。 :) – 2013-03-06 21:30:36

真的錯過了功能，以upvote良好的編輯。謝謝MusikAnimal :) – 2013-03-06 21:50:22

看到這個更新小提琴：http://jsfiddle.net/awden/3/

的問題是，你是整個.red元素附加到.blue元素

$('.red').appendTo($('.blue'))

相反的裏面，你要追加內容的.red到.blue，反之亦然。換句話說，你想要的東西，如：

$('.red > p').appendTo($('.blue'))

來源

2013-03-06 21:30:36 maxedison

哦，那麼我畢竟是非常接近。非常感謝！ – 2013-03-06 21:32:42

熟悉Firebug或Chrome的開發者工具。這些可以讓你看到HTML中實際發生了什麼，並且會告訴你如何移動整個.red元素而不是其內容。從那裏你可能已經弄清楚了。 – maxedison 2013-03-07 00:09:08

好的，我已經安裝了螢火蟲，但只真正用於純CSS。所以儘量做到這一點。 :) – 2013-03-07 07:20:14

我覺得想你的意思做的是擺脫.red的<p>到.blue，然後再返回。要做到這一點，只需添加> p到每個選擇，就像這樣：

$('.red > p').appendTo($('.blue'));

和

$('.blue > p').appendTo($('.red'));

來源

2013-03-06 21:31:08

使用jQuery移動元素

回答

相關問題