jQuery: привязать элемент, чтобы показать / скрыть при изменении его содержимого

Question

Допустим, у меня есть сообщения на моей странице:

<div class="message one">Here is some text.</div>
...
<div class="message two">Here is other text for something else.</div>

У меня есть много событий, которые могут либо добавить текст в сообщение, либо очистить его.

Прямо сейчас у меня есть эта настройка, где каждый вызов функции отправки сообщения также проверяет, является ли сообщение видимым или нет, и изменяет состояние по мере необходимости. Это означает, что есть много дублирования этой базовой логики.

Я хотел бы установить привязку, которая срабатывает при изменении любого сообщения div, так что если оно установлено пустым, оно скользит вверх, а если оно установлено с пустого на наличие текста, то оно скользит вниз.

Возможно ли это, и если да, то как?

Answer 1

По этой ссылке это называется "событием мутации", которое не поддерживается в JQuery: обнаружение изменений содержимого элемента с помощью jQuery.

Я бы рекомендовал просто создать вспомогательную функцию, чтобы объединить логику в одном месте. Например:

function updateElement(selector, newText)
{
    $(selector).text(newText);
    if (newText == '') $(selector.slideUp());
    else $(selector.slideDown());
}

Answer 2

Вот что-то не в моей голове, и это не совсем то, что вы ищете, а скорее функция, вызываемая при обновлении текста div, она потребует, чтобы вы изменили классы div из отдельных классов: 'message one'одному классу'message_one'

<script>
    $(function(){

        function show_message(class, message)
        {
            var $div = $('div[class='+class+']');

            $div.slideUp(250, function(){

                if (message.length > 0)
                {
                    $div.html(message);
                    $div.slideDown(250);
                }
            });
        }

        // example of calling this

        $('button').click(function(){
            // hide the div
            show_message('message_one', '');
        });

        $('someotherbutton').click(function(){
            // this will slideup and then slidedown
            show_message('message_two', "<p>Here's my message.</p>");
        });

    });
</script>

Answer 3

Попробуй это:

$("div").live("change", function() {

   if ( $(this).text().length == 0) {

       $(this).slideUp();

   }  else { $(this).slideDown();}

});