Javascript 如何更新特定div的元素？

我正在创建一个网页，用户可以在其中选择一个项目并显示信息。我有两个按钮（btnBuy0和btnBuy1）。单击BtnBuy0时，将显示显示数量为1的项目的详细信息。同样，如果单击btnBuy1，该项目的详细信息应附加在项目0的详细信息下面，但我无法使其工作。相反，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
    }                
});

$（“#btnBuy0”）。单击（函数（）{
如果（！sessionStorage['quantity0']）{
会话存储['quantity0']=1；
$（“#dropbox”）.append（“”+teddy[0]。desc+”，Price.）
+teddy[0]。价格+”，数量：“+sessionStorage.getItem（'quantity0'）+”删除
”；
updateBasket（）；
sessionStorage[“total0”]=parseInt（sessionStorage.getItem（'quantity0'））*teddy[0]。price；
updateSubtotal（）；
}否则{
会话存储['quantity0']+%；
$（“#dropbox”）.html（“+teddy[0].desc+”，Price.）
+teddy[0]。价格+”，数量：“+sessionStorage.getItem（'quantity0'）+”删除
”；
updateBasket（）；
sessionStorage[“total0”]=parseInt（sessionStorage.getItem（'quantity0'））*teddy[0]。price；
updateSubtotal（）；
}
if（modernizer.sessionstorage）{//检查浏览器是否支持sessionstorage
myids.push（teddy[0].partnum）；//将当前用户名添加到myids数组中
sessionStorage[“ids”]=JSON.stringify（myids）；//将其转换为字符串并放入sessionStorage
}否则{
//使用cookie而不是会话存储
}
});
$（“#btnBuy1”）。单击（函数（）{
如果（！sessionStorage['quantity1']）{
会话存储['quantity1']=1；
$（“#dropbox”）.append（“+teddy[1].desc+”，Price.）
+teddy[1].价格+”，数量：“+sessionStorage.getItem（'quantity1'）+”删除
”；
updateBasket（）；
sessionStorage[“total1”]=parseInt（sessionStorage.getItem（'quantity1'））*teddy[1]。价格；
updateSubtotal（）；
}否则{
会话存储['quantity1']++；
$（“#dropbox”）.html（“+teddy[1].desc+”，Price.）
+teddy[1].价格+”，数量：“+sessionStorage.getItem（'quantity1'）+”删除
”；
updateBasket（）；
sessionStorage[“total1”]=parseInt（sessionStorage.getItem（'quantity1'））*teddy[1]。价格；
updateSubtotal（）；
}
if（modernizer.sessionstorage）{//检查浏览器是否支持sessionstorage
myids.push（teddy[1].partnum）；//将当前用户名添加到myids数组中
sessionStorage[“ids”]=JSON.stringify（myids）；//将其转换为字符串并放入sessionStorage
}否则{
//使用cookie而不是会话存储
}                
});

在这两种情况下，您的代码几乎完全重复。您应该编写一次，将其放入一个命名函数，根据单击的按钮传入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);
});

单击的函数（whichOne）{
yolo='quantity'+whichOne；//这里我只声明您最常用的变量，以使代码更易于阅读。
如果（！会话存储[YLO]）{
会话存储[YLO]=1；
}否则{
会话存储[yolo]++；
}
//请注意，使用.html（）将始终替换#dropbox中的内容。
//如果要添加到已包含的内容中，请改用.append（）。
$（“#dropbox”）.html（“+teddy[whichOne].desc+”，Price.“+teddy[whichOne].Price+”，Quantity:“+sessionStorage.getItem（yolo）+”Remove
”；
updateBasket（）；
sessionStorage[“total”+whichOne]=parseInt（sessionStorage.getItem（yolo））*tedy[whichOne].price；
updateSubtotal（）；
}
$（“#btnBuy0”）。单击（函数（）{
点击（0）；
});
$（“#btnBuy1”）。单击（函数（）{
点击（1）；
});

你可能会减少更多。这只是一个例子，你需要调整它以适应你的情况。

---

顺便说一句，这里有一把小提琴，你可以用它来得到一个更好的主意：

这是不是更适合jQuery和/或Modernizer？这很令人困惑。根据您的描述，我想说您需要在

$（“#btnBuy0”）中使用
$（“#dropbox”）.html（）
。单击（）

函数和

$（“#dropbox”）。在
$（“#btnBuy1”）中添加（）
。单击（）。你也可以显示一些HTML吗？我没有注意到我有重复的代码。谢谢你指出这一点