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/

如何更新特定div的元素？

1 个答案: