JQuery Переключить текст на основе видимости элемента не ведет себя так, как ожидалось

Question

JQuery Переключить текст на основе видимости элемента не ведет себя так, как ожидалось

0

Пример скрипта - http://jsfiddle.net/S6CwT/

CSS

#service_container {
    display: none;
}

HTML

<a href="/services/update/8" id="view_service">View Service Record</a>

<div id="service_container">
    Test
</div>

JQuery

jQuery.noConflict();

jQuery(function() {

    // toggle visibility of service section
    jQuery('#view_service').click(function() {
        jQuery('#service_container').slideToggle('slow');
        // toggle text
        if (jQuery('#service_container').is(':visible')) {
            jQuery('#view_service').text('Hide Service Record');
        } else {
            jQuery('#view_service').text('View Service Record');
        }
        return false
    });

});

Ошибка при нажатии ссылки в первый раз, текст ссылки будет правильно изменен, чтобы сказать " Hide Service Record но при последующих щелчках текст не изменится на " Show Service Record когда div скрыт и вернется в " Hide Service Record когда контейнер снова виден.

Должно быть, что-то глупое, я не вижу, но не вижу, что я сделал неправильно.

Я попробовал это наоборот, используя is(:hidden) но это ведет себя одинаково.

martincarlin87 25 сен. 2013, в 14:36

Источник

Теги:

jquery

5 ответов

2

Попробуй это

jQuery(function() {

     jQuery("#service_container").hide();
     // toggle visibility of service section
     jQuery('#view_service').click(function()
     {
         // toggle text
         if (jQuery('#service_container').is(':visible'))
         {
             jQuery('#view_service').text('View Service Record');
         } 
         else 
         {
             jQuery('#view_service').text('Hide Service Record');
         }
         jQuery('#service_container').slideToggle('slow');

         return false
    });

});

Рабочая демонстрация

Ajinder Singh 25 сен. 2013, в 09:29

1

попробуйте использовать событие "on" для будущих изменений в любом случае, как показано ниже

 jQuery('#view_service').on("click",function() {

             // your code..
}

Neel 25 сен. 2013, в 10:50

0

спасибо, поведение остается прежним, хотя, было бы удивительно, если бы это работало, поскольку это не новый элемент DOM, это тот же элемент, но с другим текстом.
martincarlin87 25 сен. 2013, в 12:03

1

Попробуйте это, покажите/спрячьтесь в инструкции if

   if (jQuery('#service_container').is(':visible')) {
       jQuery(this).text('View Service Record');
       jQuery('#service_container').hide('slow');
   } else {
       jQuery(this).text('Hide Service Record');
       jQuery('#service_container').show('slow');
   }

DEMO

Anton 25 сен. 2013, в 10:26

1

Проблема в том, что "#service_container" отображается, когда задан вопрос, потому что он не невидим, пока не slideToggle() выполнение slideToggle(). Одним из решений было бы передать логику для изменения имени в качестве функции, которая будет запущена после завершения функции slideToggle().

...
var changeText = function() { <visibility text change logic> };
jQuery('#service_container').slideToggle('slow', changeText);
...

EDIT: ссылка сохранена скрипка.

Полный код: http://jsfiddle.net/rqGBb/1/

Если вы хотите, чтобы текст сразу менялся при щелчке, вам нужно будет самостоятельно отслеживать статус "показать/скрыть" в переменной, отвиснуть от элемента или проверить видимость во внешнем if блоке.

zanerock 25 сен. 2013, в 10:14

Ещё вопросы

спасибо, поведение остается прежним, хотя, было бы удивительно, если бы это работало, поскольку это не новый элемент DOM, это тот же элемент, но с другим текстом.

pbenard · Accepted Answer · 2013-09-25T09-43-00.000Z

if (jQuery('#view_service').html()=="View Service Record") {

скрипка: http://jsfiddle.net/S6CwT/2/

Я сравниваю html #view_service

это был лучший ответ для меня, @ Антон тоже работал, но я получил немного FOUC, тогда как с этим ничего не было и переключение все еще было на месте.