Wie zwischen Daten mit Jquery suchen und das div verbergen?

Question

Ich habe den folgenden HTML-Code: Mein Code mehrere Klassen „Chat-Nachricht“

<a href="#" onclick="dateBetweenCheck();">Filter</a> 


<div class="chat-message"> 
    <div class="message"> 
     <span class="message-date">13/02/2016</span> 
     <span class="message-content"> 
     Lorem ipsum dolor sit amet 
     </span> 
    </div> 

    <div class="message"> 
     <span class="message-date">15/02/2016</span> 
     <span class="message-content"> 
     ponderum ullamcorper delicatissimi ex mel 
     </span> 
    </div> 
</div> 

Ich habe folgende Javascript-Funktion durch die .message Klasse zu gehen und überprüfen, ob das Nachrichtendatum zwischen einem Start ist Datum und ein Enddatum.

function dateBetweenCheck() { 
     var sDate,eDate; 
     sDate = $.datepicker.parseDate('dd/mm/yy', $('#startDate').val()); 
     eDate = $.datepicker.parseDate('dd/mm/yy', $('#endDate').val()); 
     $(".message").each(function(){ 
     var messageDate = $.datepicker.parseDate('dd/mm/yy', $(this).find(".message-date").text()); 
     if((messageDate <= eDate && messageDate >= sDate)) { 
      $(this).remove(); 
      return true; 
     } 
     }); 

    } 

Wie die Klasse .message und ihre untergeordneten Elemente entfernen? Wie kann ich die .message-Klasse erneut anzeigen, wenn ich auf die Filterschaltfläche klicke?

Answer 1

• Erstens, verwenden Sie keine Inline-Click-Handler mit jQuery. Es trennt den Handler von der Registrierung ohne Grund und jQuery bietet Ihnen mehr Event-Funktionen. Verwenden Sie eine Klasse, um anzugeben, ob der Filter angewendet wird oder nicht (active in diesem Beispiel).
• Verwenden Sie hide() und show() oder toggle() um ... warten Sie auf ... verstecken, zeigen oder schalten Sie Elemente :) Entfernen entfernt sie für immer aus dem DOM.

Ihre HTML sollte eine ID auf dem Filter haben:

<a href="#" id="dateBetween">Filter</a> 

Und jQuery so etwas wie:

$('#dateBetween').click(function() { 
    var sDate, eDate; 

    // The link clicked 
    var $link = $(this); 

    // Toggle the class that indicates we are filtering 
    $link.toggleClass("active"); 

    // If we are filtering... 
    if ($link.hasClass("active")) { 

    sDate = $.datepicker.parseDate('dd/mm/yy', $('#startDate').val()); 
    eDate = $.datepicker.parseDate('dd/mm/yy', $('#endDate').val()); 

    // Hide or show messages based on the date 
    $(".message").each(function() { 

     var messageDate = $.datepicker.parseDate('dd/mm/yy', $(this).find(".message-date").text()); 

     // A true expression to toggle does a show(), else hide() 
     $(this).toggle(messageDate <= eDate && messageDate >= sDate); 
    }); 
    } 
    else 
    { 
    // Show all messages 
    $(".message").show(); 
    } 
    // This causes the filter link to do nothing (otherwise it may move the browser window to the top) 
    return false; 
});