如何使用jquery在日期之間進行搜索並隱藏div？

我有以下的HTML代碼：我的代碼有幾類「聊天消息」如何使用jquery在日期之間進行搜索並隱藏div？

<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>

我有以下的Javascript功能要經過.message類，並檢查消息的日期是開始之間日期和結束日期。

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; 
     } 
     }); 

    }

如何刪除.message類及其子項？當我單擊過濾器按鈕時，如何讓.message類再次出現？

來源

2016-12-08 Emília Parsons

你應該隱藏的項目（用'.hide（）'），不刪除它們（用'.remove（）'）。您無法恢復已刪除的項目。要扭轉它，你只需顯示（）他們全部。 –

你有沒有想過使用moment.js？這可能會縮短您正在編寫的代碼量。你可以把所有的時間放在一個數組中，並查看它是否在兩者之間，如果是這樣，請在HTML中查找數據日期屬性或特殊標識。 –

首先，不使用內聯單擊處理用jQuery。它將處理程序與註冊無關地分開，jQuery爲您提供更多的事件功能。
在沒有更多的信息，使用一個類，以指示所述過濾器是否被（在這個例子active）施加或沒有。
使用hide()和show()或toggle()以...等待它...隱藏，顯示或切換項目:)刪除將它們從DOM永遠取出。

你的HTML應該有一個ID在過濾器：

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

和jQuery是這樣的：

$('#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; 
});

來源

2016-12-08 16:31:55

如何使用jquery在日期之間進行搜索並隱藏div？

回答

相關問題