0

私のページにメッセージがあるとしましょう：

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

メッセージにテキストを入れたり、メッセージをクリアしたりする可能性のあるイベントがたくさんあります。

現在、この設定では、すべてのメッセージ送信関数呼び出しがメッセージが表示されているかどうかを確認し、必要に応じて状態を変更しています。つまり、この基本的なロジックには多くの重複があります。

メッセージdivが変更されたときにトリガーされるバインディングを設定して、空に設定されている場合は上にスライドし、空からテキストを含むように設定されている場合は下にスライドするようにします。

それは可能ですか？もしそうなら、どのように？

4

3 に答える 3

3

このリンクによると、これは「ミューテーションイベント」と呼ばれ、JQueryではサポートされていません。jQueryで 要素コンテンツの変更を検出します

ロジックを1か所に統合​​するためのヘルパー関数を作成することをお勧めします。例えば：

function updateElement(selector, newText)
{
    $(selector).text(newText);
    if (newText == '') $(selector.slideUp());
    else $(selector.slideDown());
}
于 2012-04-15T19:41:08.430 に答える
1

これは私の頭から離れたものであり、あなたが探しているものではありませんが、divテキストを更新するときに呼び出す関数であり、divクラスを別のクラスから変更する必要があります：'メッセージ1 '単一のクラスに'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>
于 2012-04-15T19:42:40.763 に答える
0

これを試して：

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

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

       $(this).slideUp();

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

});
于 2012-04-15T19:46:11.463 に答える