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

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

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

然後在你的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(); 
    } 
} 

不要忘了將savedSelection放置在兩個函數的可達範圍內。