0

恐怕不是最清晰的标题。

我的网站有一个搜索页面，它最初会加载任何查询的前 6 个结果，然后再加载 6 个，直到屏幕已满或用户向下滚动。

在页面顶部，我尝试添加一些过滤器，其中包括淡出任何缺货项目结果。

因此，后面的代码将“outOfStock”类添加到缺货产品的任何项目容器中。然后非常简单的 jQuery 可以淡出这些并切换按钮文本：

    $('#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')到 AJAX 成功函数的返回，但这似乎不起作用，即使它起作用了，它仍然会在加载时显示结果，然后立即隐藏它们，这不是我的结果把目标放在。

display:none如果之前单击过元素inStockOnly（或者如果它有文本Show All Items），我将如何强制未加载的项目加载的任何建议

4

1 回答 1

0

加载资源时能否传递按钮的选中或未选中值？那么您只能返回那些具有适当状态的项目。

显然，不利的一面是当用户改变主意并以另一种方式切换按钮时，它们不会出现在标记中。此时，您可以对缺货商品提出另一轮请求。

当返回结果时，您似乎也应该能够在成功函数中按您希望的方式处理它。即，在通过 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').click 函数中填充该隐藏值。

// toggle hidden element
($("#hiddenElement").attr("showHidden") == "true" ? $("#hiddenElement").attr("showHidden","false") : $("#hiddenElement").attr("showHidden","true"));
于 2012-04-07T14:01:54.970 回答