如何更新跨度标签的内容？答案

【问题标题】：how to update contents of a span tag?如何更新跨度标签的内容？
【发布时间】：2013-03-24 22:40:24
【问题描述】：

我正在创建一个网页，用户通过单击按钮选择一个项目。所选项目的详细信息将显示在一个保管箱中。目前，如果用户再次选择它，我可以让它更新数量。我遇到的问题是，如果用户首先单击 btnBuy1 （详细信息显示在保管箱中），然后单击 btnBuy2 （再次显示详细信息），但是当他们再次单击 btnBuy2 时，来自 btnBuy2 的详细信息已更新但btnBuy1 的详细信息消失了。

        $("#btnBuy0").click(function()
        {
            if (!sessionStorage['quantity0'])
            {
                sessionStorage['quantity0'] = 1;
                $("#dropbox").append('<span id = "0"><img class = "thumb" src="../images/21_metoyou.jpg" />' + teddy[0].desc + ", Price £"
             + teddy[0].price + ", Quantity: " + sessionStorage.getItem('quantity0') + "</span><br/>");

            }           
            else
            {
                sessionStorage['quantity0']++;
                $("#dropbox").html('<span id = "0"><img class = "thumb" src="../images/21_metoyou.jpg" />' + teddy[0].desc + ", Price £"
             + teddy[0].price + ", Quantity: " + sessionStorage.getItem('quantity0') + "</span><br/>");

            }
            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('<span id = "1"><img class = "thumb" src="../images/birthday_metoyou.jpg" />' + teddy[1].desc + ", Price £"
             + teddy[1].price + ", Quantity: " + sessionStorage.getItem('quantity1') + "</span><br/>");

            }
            else
            {
                sessionStorage['quantity1']++;
                $("#dropbox").html('<span id = "1"><img class = "thumb" src="../images/birthday_metoyou.jpg" />' + teddy[1].desc + ", Price £"
             + teddy[1].price + ", Quantity: " + sessionStorage.getItem('quantity1') + "</span><br/>");

            }
            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
            }
        });

【问题讨论】：

标签： javascript html updates session-storage

【解决方案1】：

我不是 jQuery 人，但我认为您的问题是由于您增加计数然后替换 Dropbox 中的所有 HTML 造成的 - 可见

sessionStorage['quantity0']++;
  $("#dropbox").html('<span id = "0"><img class = "thumb" src="..jpg" />' + 
// there -------^^^^-----  
                       teddy[0].desc + ", Price £"
                     + teddy[0].price + ", Quantity: " + 
                       sessionStorage.getItem('quantity0') + "</span><br/>");

您不应该替换 $("#0") 而不是 $("#dropbox") 的内容吗？ ...即

sessionStorage['quantity0']++;
  $("#0").html('<img class = "thumb" src="..jpg" />' + teddy[0].desc + 
                     ", Price £" + teddy[0].price + ", Quantity: " + 
                     sessionStorage.getItem('quantity0'));

【讨论】：