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

#jquery #append #toggle

#jquery #добавить #переключение

Вопрос:

У меня есть список запланированных дат, видимость которых мы переключаем. Они загружаются как полный список (для резервного копирования, отличного от js), затем, когда документ готов, jQuery скрывает все, кроме первой даты, изменяет заголовок на следующую дату и добавляет «показать больше» div к родительскому div списка дат.

Скрипт настроен как переключатель, который показывает все даты, изменяет заголовок, показывает больше текста, а затем возвращается к скрытой версии. Функции переключения для всего работают просто отлично…. ЗА исключением …. добавленный div исчезает при выполнении второй функции переключения. Я не уверен, удаляется ли он или просто скрыт.

Если я закодирую показать больше 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");  

});

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

Ответ №1:

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

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

В качестве еще одного предложения я рекомендую изменить

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

Для

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

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

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

1. Еще больше хороших идей. Использование .after экономит мне несколько байтов в html, устраняя лишнюю оболочку div.

2. Том, немного подумав о твоей проблеме, подумай о том, чтобы проверить это: jsfiddle.net/A3fXv/2 это позволило бы вам более легко размещать несколько разделов «даты» на одной странице, что на самом деле несколько сложно при текущей настройке. Если ничего другого, это просто даст вам некоторые другие инструменты для использования в ваших путешествиях по jQuery.

3. Спасибо за дополнительные идеи для кода, чем больше я вижу, тем больше узнаю. В этом проекте есть только один список, которым мы манипулируем.

Ответ №2:

Ваш добавленный файл div сопоставляется с помощью $(".dates div:not(#1)") селектора в hide callback.

1. Я думал, что div: not (# 1) применяется только к разделам внутри дат или добавленный div добавляется внутри дат? Я добавил это неправильно?

2. Да, вы добавляете div внутри dates.

3. Хорошо, я поместил даты в другой div, и это работает. Спасибо вам обоим!