如何更新特定div的元素？

Question

我正在创建一个网页，用户可以选择一个项目并显示信息。我有两个按钮（btnBuy0和btnBuy1）。单击BtnBuy0时，显示数量为1的项目的详细信息。同样，如果单击btnBuy1，该项目的详细信息应该添加到item0的详细信息的下方，但我无法使其工作。相反，item0的细节被item1的细节所取代。

$("#btnBuy0").click(function() { 
    if (!sessionStorage['quantity0']) { 
     sessionStorage['quantity0'] = 1; 
     $("#dropbox").append('<div id = "0"><img class = "thumb" id = "t0" src="../images/21_metoyou.jpg" />'+ teddy[0].desc + ", Price £" 
     + teddy[0].price + ", Quantity: " + sessionStorage.getItem('quantity0') + "<button id = 'btnRemove0'>Remove</button></div><br/>"); 
     updateBasket(); 
     sessionStorage["total0"] = parseInt(sessionStorage.getItem('quantity0')) * teddy[0].price; 
     updateSubtotal(); 
    } else { 
     sessionStorage['quantity0']++; 
     $("#dropbox").html('<div id = "0"><img class = "thumb" id = "t0" src="../images/21_metoyou.jpg" />' + teddy[0].desc + ", Price £" 
     + teddy[0].price + ", Quantity: " + sessionStorage.getItem('quantity0') + "<button id = 'btnRemove0'>Remove</button></div><br/>"); 
     updateBasket(); 
     sessionStorage["total0"] = parseInt(sessionStorage.getItem('quantity0')) * teddy[0].price; 
     updateSubtotal(); 

    } 

    if (Modernizr.sessionstorage) { // check if the browser supports sessionStorage 
     myids.push(teddy[0].partnum); // add the current username to the myids array 
     sessionStorage["ids"]=JSON.stringify(myids); // convert it to a string and put into sessionStorage 
    } else { 
    // use cookies instead of sessionStorage 
    } 
}); 

$("#btnBuy1").click(function() { 
    if (!sessionStorage['quantity1']) { 
     sessionStorage['quantity1']=1; 
     $("#dropbox").append('<div id = "1"><img class = "thumb" id = "t1" src="../images/birthday_metoyou.jpg" />' + teddy[1].desc + ", Price £" 
     + teddy[1].price + ", Quantity: " + sessionStorage.getItem('quantity1') + "<button id = 'btnRemove1'>Remove</button></div><br/>"); 
     updateBasket(); 
     sessionStorage["total1"] = parseInt(sessionStorage.getItem('quantity1')) * teddy[1].price; 
     updateSubtotal(); 
    } else { 
     sessionStorage['quantity1']++; 
     $("#dropbox").html('<div id = "1"><img class = "thumb" id = "t1" src="../images/birthday_metoyou.jpg" />' + teddy[1].desc + ", Price £" 
     + teddy[1].price + ", Quantity: " + sessionStorage.getItem('quantity1') + "<button id = 'btnRemove1'>Remove</button></div><br/>"); 
     updateBasket(); 
     sessionStorage["total1"] = parseInt(sessionStorage.getItem('quantity1')) * teddy[1].price; 
     updateSubtotal(); 
    } 

    if (Modernizr.sessionstorage) { // check if the browser supports sessionStorage 
     myids.push(teddy[1].partnum); // add the current username to the myids array 
     sessionStorage["ids"]=JSON.stringify(myids); // convert it to a string and put into sessionStorage 
    } else { 
    // use cookies instead of sessionStorage 
    }     
}); 

Answer 1

你的代码重演几乎完全在这两种情况下。你应该写一次，把它命名为一个函数，根据点击的按钮传入1或0，并使用里面的变量来计算出所有的代码。类似这样的：

function clicked(whichOne) { 
    yolo = 'quantity' + whichOne; //Here I just declare your most used variable to make the code easier to read. 

    if(!sessionStorage[yolo]) { 
     sessionStorage[yolo] = 1; 
    } else { 
     sessionStorage[yolo]++; 
    } 

    //Notice that using .html() will always replace what's inside the #dropbox. 
    //If you want to add to what is already inside, use .append() instead. 
    $("#dropbox").html('<div id ="'+ whichOne +'"><img class = "thumb" id = "t' + whichOne +'" src="../images/21_metoyou.jpg" />'+ teddy[whichOne].desc + ", Price £" + teddy[whichOne].price + ", Quantity: " + sessionStorage.getItem(yolo) + "<button id = 'btnRemove"+ whichOne +"'>Remove</button></div><br/>"); 

    updateBasket(); 

    sessionStorage["total" + whichOne] = parseInt(sessionStorage.getItem(yolo)) * teddy[whichOne].price; 

    updateSubtotal(); 
} 

$("#btnBuy0").click(function() { 
    clicked(0); 
}); 

$("#btnBuy1").click(function() { 
    clicked(1); 
}); 

你可能会减少甚至更多。这只是一个例子，您需要根据您的情况进行调整。 顺便说一下这里的小提琴，你可以玩弄得到一个更好的主意：http://jsfiddle.net/ArzSs/2/