JavaScript - JSONでページ分割

Question

私はJavascriptでページ分割を行っています。まず、JSONデータをファイルから取得し、配列に格納します。次に、項目をページにレンダリングします。以前のページボタンと次のページボタンを追加しましたが、次のページをクリックすると、すべてのアイテムがあり、新しいものが追加されますが、私の質問はdivになります。私はそれをどうやって行うことができるのでしょうか？そうすれば、divをクリアすることはできません。すでにdivをクリアしていれば、unchosenになります。ここで

は、JSONのJavaScriptのだ：

$.getJSON("/Search.php", function(itemsList){ 
    if(itemsList.items){ 
     for(var i = 0;i < itemsList.items.length; i++){ 
      pruice = itemsList.items[i].price; 
      prices[itemsList.items[i].name] = pruice; 
      items[i] = { 
       name: itemsList.items[i].name, 
       img: itemsList.items[i].img, 
       price: itemsList.items[i].price, 
       color: itemsList.items[i].color 
      }; 
     } 
    } 
items.sort(function(a, b) {return b.price - a.price;}); 
OnFinished(); 
}); 

レンダリング機能

function OnFinished(){ 
$('#InventoryMe').empty(); 
var perPage = 30; 
function paginate(items, page) { 
    var start = perPage * page; 
    return items.slice(start, start + perPage); 
} 

function renderItems(pageItems){ 
    pageItems.forEach(function(item, index, arr){ 
     $('#InventoryMe').append("<div class='item' style='background-image: url(https://steamcommunity-a.akamaihd.net/economy/image/"+item.img+"/116x116f)'> <span class='nameArea'>"+item.name+"</span><span class='priceArea' style='border: 1px solid #1f1e1e;border-bottom-color:"+item.color+"'>"+item.price+"</span></div>"); 
    }); 
} 

次&前のページ

var page = 0; 
renderItems(paginate(items, page)); 
$('#nextPage').on('click', function(){ 
    $('#InventoryMe').empty(); 
     page++; 
     renderItems(paginate(items, page)); 
}); 
$('#previousPage').on('click', function(){ 
    $('#InventoryMe').empty(); 
     page--; 
     renderItems(paginate(items, page)); 
}); 
} 

項目選択スクリプト

$("#InventoryMe").on("click", ".item", function() { 
    var calculateP = fee/100; 
    var itemName = $(this).find('.nameArea').text(); 
    var itemPrice = $(this).find('.priceArea').text(); 
    var newPrice = itemPrice * calculateP; 
    var jacobExe = parseInt(newPrice * 100)/100; 
    if($(this).closest(".item").hasClass("item-selected")){ 
     $(this).last().removeClass("item-selected"); 
    } else{ 
     $(this).toggleClass("item-selected"); 
    } 
    calculateTotal(); 
}); 

Answer 1

あなたがアイテムを選択していて、改ページして再び元に戻ったと仮定して、選択が消えてしまいます。

この場合は、javascript変数に、好ましくはidで選択内容を保存します。

$.getJSON("/Search.php", function(itemsList){ 
    if(itemsList.items){ 
     for(var i = 0;i < itemsList.items.length; i++){ 
      pruice = itemsList.items[i].price; 
      prices[itemsList.items[i].name] = pruice; 
      items[i] = { 
       name: itemsList.items[i].name, 
       img: itemsList.items[i].img, 
       price: itemsList.items[i].price, 
       color: itemsList.items[i].color, 
       id: itemsList.items[i].id //add id 
      }; 
     } 
    } 
    items.sort(function(a, b) {return b.price - a.price;}); 
    OnFinished(); 
}); 

することを忘れないでくださいそして、あなたのrenderItemsで、私は

function renderItems(pageItems) { 
    pageItems.forEach(function(item, index, arr) { 
     $('#InventoryMe').append("<div class='item' style='background-image: url(https://steamcommunity-a.akamaihd.net/economy/image/"+item.img+"/116x116f)'> <span class='nameArea'>"+item.name+"</span><span class='priceArea' style='border: 1px solid #1f1e1e;border-bottom-color:"+item.color+"'>"+item.price+"</span></div>"); 
    }); 
    if (savedSelection) { 
     $('[data-id="'+savedSelection+'"]').click(); 
    } 
} 

を行うだろうクリックで

var savedSelection; 
$("#InventoryMe .item").click(function() { 
    savedSelection = $(this).data('id'); 
    var calculateP = fee/100; 
    var itemName = $(this).find('.nameArea').text(); 
    var itemPrice = $(this).find('.priceArea').text(); 
    var newPrice = itemPrice * calculateP; 
    var jacobExe = parseInt(newPrice * 100)/100; 
    if($(this).closest(".item").hasClass("item-selected")){ 
     $(this).last().removeClass("item-selected"); 
    } else{ 
     $(this).toggleClass("item-selected"); 
    } 
    calculateTotal(); 
}); 

をIDを保存するとDOM

function renderItems(pageItems){ 
    pageItems.forEach(function(item, index, arr){ 
     $('#InventoryMe').append("<div data-id='"+item.id+"' class='item' style='background-image: url(https://steamcommunity-a.akamaihd.net/economy/image/"+item.img+"/116x116f)'> <span class='nameArea'>"+item.name+"</span><span class='priceArea' style='border: 1px solid #1f1e1e;border-bottom-color:"+item.color+"'>"+item.price+"</span></div>"); 
    }); 
} 

にIDを追加します。両方の関数の到達可能なスコープにsavedSelectionを配置する。