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放置在两个函数的可达范围内。