添加的div在切換文本後消失

我有一個我們切換可見性的計劃日期列表。它們作爲完整列表加載（對於非js後備），然後在準備好文檔時，JQuery隱藏除第一個日期以外的所有內容，將標題更改爲Next Date，並向日期列表的父div添加「show more」div。添加的div在切換文本後消失

該腳本設置爲切換，它顯示所有日期，更改標題，顯示更多文本，然後恢復爲隱藏版本。切換功能的一切工作正常....除了......附加的div消失時，第二切換功能發生。我不確定它是否被刪除或者只是隱藏。

如果我將show more div編碼到html中，它會像編碼一樣來回切換。但作爲追加，它在切換結束時消失。

我的HTML：

<div class="title">Scheduled Dates</div> 
<div class="dates"> 
<div id="1">23 May 2011</div> 
<div id="2">25 June 2011</div> 
<div id="3">28 Aug 2011</div> 
<div id="4">15 Nov 2011</div> 
</div>

的JS：

$(".dates div:not(#1)").hide(); 
$(".title").text("Next Departure"); 
$(".dates").append('<div class="datesctrl">show more</div>'); 

$(".datesctrl").toggle(function(){ 
    $(".dates div").show(); 
    $(".datesctrl").text("Show Less"); 
    $(".title").text("Scheduled Dates"); 

}, function(){ 
    $(".dates div:not(#1)").hide(); 
    $(".datesctrl").text("Show More"); 
    $(".title").text("Next Departure"); 

});

有什麼建議？

來源

2011-05-06 Tom

當你在你的評論人說你打算追加「顯示更多」後的日期，這是可以做到：

$(".dates").after('<div class="datesctrl">show more</div>');

正如另一項建議，我建議改變

$(".dates div:not(#1)").hide();

到

$(".dates div").not(':first-child').hide();

它只是更具可讀性。此外，它將與所有日期類別的div一起使用。

例如這裏：http://jsfiddle.net/A3fXv/

來源

2011-05-06 04:39:10

更多好點子。通過消除額外的包裝div，使用.after可以節省我在html中的幾個字節。 – Tom 2011-05-06 04:49:19

Tom在考慮了一下你的問題後，考慮檢查一下：http://jsfiddle.net/A3fXv/2/它可以更容易地讓你在同一頁面上有多個「日期」div，實際上它有點目前的設置很困難。如果沒有其他的東西，它只會給你一些其他工具用於你的jQuery旅行。 – 2011-05-06 04:53:28

感謝您提供額外的代碼想法，我越看到我越學習。這個項目只有我們正在操作的一個列表。 – Tom 2011-05-06 05:09:43

您附加的div與隱藏回調中的$(".dates div:not(#1)")選擇器相匹配。

來源

2011-05-06 04:20:31

我想在div：沒有（＃1）僅適用於div的內部日期或正在內的日期添加所附的div？我錯了嗎？ – Tom 2011-05-06 04:32:46

是的，你正在附加日期的div。 – 2011-05-06 04:35:19

好的，我把日期包裹在另一個div裏面，它工作。感謝你們倆！ – Tom 2011-05-06 04:44:06

添加的div在切換文本後消失

回答

相關問題