请问一下,如何修改价格

请问一下,如何修改价格

<section class="subject">
   <div class="subject_calculate">
       <h1>我的购物车</h1>
       <table class="subject_table">

           <!--题头-->
           <tr>
               <th>
                   <label class="subject_table_th_all">
                       <input type="checkbox" class="checkBox">全选
                   </label>
                   <p class="subject_table_th_name">商品名称</p>
               </th>
               <th>
                   <p class="subject_table_th_total">总价</p>
               </th>
               <th>
                   <p class="subject_table_th_price">单价</p>
               </th>
               <th>
                   <p class="subject_table_th_number">数量</p>
               </th>
               <th>
                   <p class="subject_table_th_operation">操作</p>
               </th>
           </tr>

           <!--商品1-->
           <tr>
               <td>
                   <input type="checkbox" class="subject_table_td_check checkBox">
                   <img src="img/g1.jpg" class="subject_table_td_img">
                   <p class="subject_table_td_name">前端小白成长日记</p>
               </td>
               <td>
                   <p class="subject_table_td_total">¥396</p>
               </td>
               <td>
                   <p class="subject_table_td_price">$396</p>
               </td>
               <td>
                   <input type="button" class="subject_table_td_subtract" value="-">
                   <input type="number" min="1" max="10" class="subject_table_td_number" value="1">
                   <input type="button" class="subject_table_td_add" value="+">
               </td>
               <td>
                   <p class="subject_table_td_operation">删除</p>
               </td>
           </tr>

           <!--商品2-->
           <tr>
               <td>
                   <input type="checkbox" class="subject_table_td_check checkBox">
                   <img src="img/g2.jpg" class="subject_table_td_img">
                   <p class="subject_table_td_name">前端小白成长日记</p>
               </td>
               <td>
                   <p class="subject_table_td_total">¥396</p>
               </td>
               <td>
                   <p class="subject_table_td_price">$396</p>
               </td>
               <td>
                   <input type="button" class="subject_table_td_subtract" value="-">
                   <input type="number" min="1" max="10" class="subject_table_td_number" value="1">
                   <input type="button" class="subject_table_td_add" value="+">
               </td>
               <td>
                   <p class="subject_table_td_operation">删除</p>
               </td>
           </tr>

           <!--商品3-->
           <tr>
               <td>
                   <input type="checkbox" class="subject_table_td_check checkBox">
                   <img src="img/g1.jpg" class="subject_table_td_img">
                   <p class="subject_table_td_name">前端小白成长日记</p>
               </td>
               <td>
                   <p class="subject_table_td_total">¥396</p>
               </td>
               <td>
                   <p class="subject_table_td_price">$396</p>
               </td>
               <td>
                   <input type="button" class="subject_table_td_subtract" value="-">
                   <input type="number" min="1" max="10" class="subject_table_td_number" value="1">
                   <input type="button" class="subject_table_td_add" value="+">
               </td>
               <td>
                   <p class="subject_table_td_operation">删除</p>
               </td>
           </tr>

           <!--商品4-->
           <tr>
               <td>
                   <input type="checkbox" class="subject_table_td_check checkBox">
                   <img src="img/g1.jpg" class="subject_table_td_img">
                   <p class="subject_table_td_name">前端小白成长日记</p>
               </td>
               <td>
                   <p class="subject_table_td_total">¥396</p>
               </td>
               <td>
                   <p class="subject_table_td_price">$396</p>
               </td>
               <td>
                   <input type="button" class="subject_table_td_subtract" value="-">
                   <input type="number" min="1" max="10" class="subject_table_td_number" value="1">
                   <input type="button" class="subject_table_td_add" value="+">
               </td>
               <td>
                   <p class="subject_table_td_operation">删除</p>
               </td>
           </tr>
       </table>
       <div class="subject_settle">
           <input type="button" class="subject_settle_but" value="去结算">
           <p class="subject_settle_summary">
               应付金额:
               <span class="subject_settle_all">
                   ¥1584
               </span>
           </p>

       </div>
   </div>
</section>

js:

var subtractBut=document.querySelectorAll(".subject_table_td_subtract"),
   addBut=document.querySelectorAll(".subject_table_td_add"),
   total=document.querySelectorAll(".subject_table_td_total"),
   price=document.querySelectorAll("subject_table_td_price"),
   inputNumber=document.querySelectorAll(".subject_table_td_number"),
   index;

for (var i=0;i<inputNumber.length;i++){
   inputNumber[i].id = i;
   index=inputNumber[i].id;
   inputNumber[i].onchange=function () {
       if(inputNumber[index].value < 1){
           inputNumber[index].value = 1;
       }
       if(inputNumber[index].value > 100){
           inputNumber[index].value = 100;
       }
       var node=document.createElement("span");
       var textnode=+inputNumber[index].value * parseInt(price[index].innerText);
       node.innerHTML=textnode;
       total[index].innerHTML=node;
   }
}

修改不了商品的总价。。。

正在回答

登陆购买课程后可参与讨论,去登陆

2回答

可参考图中代码修改http://img1.sycdn.imooc.com/climg//595f3efd00011e4912130753.jpg

  • 鄒啓凡 提问者 #1
    通过加减按钮改变input中值时无法使总价改变,请问一下应该如何修改代码
    2017-07-10 10:34:06
  • 鄒啓凡 提问者 #2
    非常感谢!
    2017-07-11 17:47:59
怎么都被占用了呢 2017-07-10 12:07:37

跟直接改变值的原理是一样的,给加、减号绑定单击事件,单击事件发生时,让当前加、减号对应的数量改变,取数量值,取单价,相乘。

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
HTML5与CSS3实现动态网页 2018
  • 参与学习       1887    人
  • 提交作业       4643    份
  • 解答问题       5760    个

有HTML和CSS基础,却不知道如何进阶?本路径带你通过系统学习,完成从“会做网页”到“做出好的动态网页”的蜕变,迈出成为前端工程师的第一步。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师