0

我正在创建一个网页，用户可以在其中选择一个项目并显示信息。我有两个按钮（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
    }                
});
4

1 回答 1

0

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

于 2013-03-27T14:38:29.950 回答