Добавленный div исчезает после переключения текста внутри - PullRequest
Новая
       7

Добавленный div исчезает после переключения текста внутри

1 голос
/ 06 мая 2011

У меня есть список запланированных дат, которые мы переключаем видимость. Они загружаются как полный список (для резервных файлов, отличных от js), а затем, когда документ готов, JQuery скрывает все, кроме первой даты, меняет заголовок на «Следующая дата» и добавляет «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");  

});

Есть предложения?

Ответы [ 2 ]

0 голосов
/ 06 мая 2011

Как вы сказали в одном из ваших комментариев, вы хотели добавить «Показать больше» после дат, что можно сделать: 

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

Так же, как другое предложение, я рекомендую изменить 

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

до 

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

это просто немного более читабельно. Кроме того, он будет работать со всеми div с классом даты.

пример здесь: http://jsfiddle.net/A3fXv/

0 голосов
/ 06 мая 2011

Ваш добавленный div сопоставляется селектором $(".dates div:not(#1)") в обратном вызове скрытия.

...