0

私が恐れている最も明確に作成されたタイトルではありません。

私のWebサイトには、クエリの最初の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はより多くの結果をロードしますが、このフィルターはそれらの結果には適用されません。

もちろん、ボタンをもう一度押すと、アイテムの半分でフェードが誤って切り替わります。

AJAX成功関数の戻り値に追加しようとし$('.outOfStock').css('display','none')ましたが、機能しないようですが、機能したとしても、ロード中は結果が表示され、直後に非表示になります。これは私が行った結果ではありません。目指して。

display:none要素inStockOnlyが以前にクリックされた場合（またはテキストが含まれている場合Show All Items） 、ロードされていないアイテムをロード時に強制する方法に関する提案

4

1 に答える 1

0

リソースをロードするときに、ボタンのチェックされた値またはチェックされていない値を渡すことができますか？そうすると、適切なステータスのアイテムのみを返品できます。

明らかに、欠点は、ユーザーが気が変わってボタンを逆に切り替えたときに、マークアップに含まれないことです。その時点で、在庫切れのアイテムをもう一度リクエストすることができます。

また、結果が返されたときに、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'）。click関数に入力する必要があります。

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