0

ユーザーがアイテムを選択して情報を表示できる Web ページを作成しています。2 つのボタン (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 に答える