jQuery: ein Element binden/auszublenden zu zeigen, wenn sein Inhalt verändert werden

Question

Lassen Sie uns sagen, ich habe Nachrichten auf meiner Seite:

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

ich viele Ereignisse, die entweder einen Text in der Nachricht setzen kann, oder Klären Sie es auf.

Im Moment habe ich diese Einrichtung, wo jeder Nachricht sendende Funktionsaufruf auch prüft, ob die Nachricht sichtbar ist oder nicht und den Zustand wie erforderlich ändern. Das bedeutet, dass diese grundlegende Logik mehrfach dupliziert wird.

Ich möchte eine Bindung einrichten, die ausgelöst wird, wenn eine Nachricht div geändert wird, so dass, wenn es leer gesetzt ist, es nach oben, und wenn es von leer bis Text festgelegt ist, dann rutscht es nach unten.

Ist das möglich, und wenn ja, wie?

Answer 1

Per diesen Link, wäre dies ein „Mutationsereignis“ bezeichnet werden, die in JQuery nicht unterstützt wird: Detect element content changes with jQuery

Ich würde einfach empfehlen eine Hilfsfunktion zu schaffen, die Logik in einem Ort zu konsolidieren. ZB:

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

Answer 2

ist hier etwas aus der Spitze von meinem Kopf und ist nicht genau das, was Sie suchen, sondern ist eine Funktion, wenn Sie den Text div Aktualisierung zu nennen, es müssten Sie die Änderungen div Klassen von separaten Klassen: 'Nachricht eine' zu einer einzigen Klasse '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

try this:

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

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

     $(this).slideUp(); 

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

});