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 不支持的“突变事件”：Detect element content changes with 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();}

});