AJAX 페이지에 계속로드되지만 아직로드되지 않은 항목에도 적용되는 필터가 있음

Question

가장 명확하게 만들어진 제목이 아님.

내 웹 사이트에는 검색어의 처음 6 개 결과를 처음로드 한 다음 화면이 가득 찰 때까지 또는 사용자가 아래로 스크롤 할 때까지 6 개의 페이지가로드됩니다.

페이지 상단에서 일부 필터를 추가하려고 할 때 재고가없는 상품 결과가 사라집니다.

그래서 코드 뒤에 "outOfStock"클래스가 재고가없는 제품의 모든 항목 컨테이너에 추가됩니다. 아주 간단한 jQuery를 다음 이러한 페이드 아웃하고 버튼 텍스트 전환 할 수 있습니다 : 이것은 단지 그렇게 페이지 아래로 사용자가 스크롤의 AJAX로드로, 이미 표시되는 항목에이 작업을 수행하는 과정을 제외하고 괜찮

$('#inStockOnly').click(function() { 
     var buttonText = $(this).html(); 
     $('.outOfStock').fadeOut('slow'); 
     $(this).html(buttonText == "Show All Items" ? "In Stock Only" : "Show All Items"); 
    }); 

을 결과는 더 많지만이 필터는 해당 결과에 적용되지 않습니다.

물론 버튼을 다시 누르면 항목 절반이 페이드를 잘못 표시합니다!

나는 AJAX 성공 함수의 반환에 $('.outOfStock').css('display','none')을 추가하려고 시도했으나 작동하지 않더라도 결과가 표시되지만 즉시 결과를 표시 한 다음 즉시 숨길 수 있습니다. 내가 목표로 한 결과가 아닙니다.

가로드로 요소 inStockOnly 전에 클릭 한 경우 나, display:none에 해제로드 된 항목을 강제 할 방법에 대한 제안 (또는 텍스트 Show All Items있는 경우)

Answer 1

당신이 통과 수를 선택 또는 선택 해제 리소스를로드 할 때 버튼의 가치? 그런 다음 적절한 상태에있는 항목 만 반환 할 수 있습니다.

분명히, 사용자가 마음을 바꾸고 다른 방향으로 전환 할 때 마크 업에 포함되지 않는다는 것이 분명합니다. 어느 시점에서 재고가없는 품목에 대해 다른 요청을 할 수 있습니다.

결과가 반환 될 때 success 함수에서 원하는 방식을 처리 할 수 ​​있어야합니다. 즉, AJAX를 통해 해당 항목을 표시하는 과정에서 '재고 항목'에 대해서만 사용자의 점검 또는 확인되지 않은 상태에 대한 최신 상태를 확인합니다. 이는 가장 최근에 요청한 항목을 추적하기 위해 숨겨진 요소를 작성해야 함을 의미 할 수 있습니다. 이 아마도처럼

:

$.ajax({ 
    url: url, 
    data: data, 
    success: function(data) { 
     // Load all the values onto the page however you were already doing 
     if ($("#hiddenElement").attr("showHidden") == "true") { 
      $('.outOfStock').hide(); 
     } 
    } 
}); 

그럼 당신은 당신의 $ ('# inStockOnly')의 숨겨진 값을 채울 필요가 기능을 클릭합니다..

// toggle hidden element 
($("#hiddenElement").attr("showHidden") == "true" ? $("#hiddenElement").attr("showHidden","false") : $("#hiddenElement").attr("showHidden","true"));