没有得到正确的javascript [关闭]

Question

我正在开发一个电子商务网站，我也是一个新手。我编写了一个java脚本来增加单击按钮时文本框中显示的数字。我从数据库中获取行并将div标记放入while循环中。 div标签包含菜肴名称，菜肴类型，价格，显示数量的文本框，两个按钮用于增加菜肴的数量，另一个用于减少菜肴的数量。按钮显示在每个div标签上，因为每个div标签显示菜肴的信息。因此，当我点击第二道菜或第三道菜的div上的按钮标签时，它会增加第一个div的值，而不是增加相应标签的值。帮我 ！

<script type="text/javascript">
      function increase(){
          var x = document.getElementById("quantity").value;
          x++;
          document.getElementById("quantity").value = x;
          
          var y = document.getElementById("price").value;
          var z = y * x;
          document.getElementById("price").value = z;
      }
  </script>

<%
        while(resultSet.next()) {
    %>
    
        <div class="box box-primary">
        <!-- attackment block-->
      <div class="attachment-block clearfix">
          <!-- col -->
          <div class="col-md-6 pull-left">
                <img class="attachment-img" src="../dist/img/photo1.png" alt="Attachment Image">
                <div class="attachment-pushed box-tools">
                    <h4 class="attachment-heading"><a href="dishItemList.jsp">  &NoBreak; <%= resultSet.getString(2) %> | 
                            &NoBreak; <%= resultSet.getString(5) %>  | &NoBreak; <span data-toggle="tooltip" title="Vegeterian Dish" class="label label-success">Veg</span></a></h4>
                  <div class="attachment-text">
                       <h4>
                           <i class="fa fa-rupee"></i> &NoBreak; <%= resultSet.getInt(3) %>
                      </h4>
                      <strong> Rating : 4.1 </strong>
                  </div>
                  <!-- /.attachment-text -->
                </div>
                <!-- /.attachment-pushed -->  
            </div>
              <!--/col-->  
          
              <!--col-->
          <div class="col-md-6 pull-right">
              <button type="button" class="btn btn-primary btn-box-tool pull-right" onclick="increase()"><i class="fa fa-plus"></i></button>
              <div class="col-xs-3 pull-right">
                  <input type="text" id="quantity" class="form-control input-sm" value="<%= resultSet.getInt(3) %>"> 
                </div>
              <button type="button" class="btn btn-primary btn-box-tool pull-right"><i class="fa fa-minus"></i></button>
              <br>
              <br>
              <div class="input-group pull-right col-sm-3">
                        <span class="input-group-addon"> <i class="fa fa-rupee"></i> </span>
                        <input type="text" id="price" class="form-control" value="<%= resultSet.getInt(3) %>"  disabled>
                        </div>
          </div>
          <!--/col-->
              </div>
              <!-- /.attachment-block -->
    </div>  
    
    <% } 
    
        connection.close();
    %>

Answer 1

所以你犯的错误是如果你循环几个东西并硬编码id，几个元素得到相同的id，这就是你的increase（）函数更新“错误”元素的原因。

所以你需要给循环中的每个项目一个唯一的id。一种方法是将resultSet中的id附加到HTML元素的id。

<div class="col-md-6 pull-right">
    <button type="button" class="btn btn-primary btn-box-tool pull-right" onclick="increase()">
        <i class="fa fa-plus"></i>
    </button>
    <div class="col-xs-3 pull-right">
        <input type="text" id="quantity<%= resultSet.id %>" class="form-control input-sm" value="<%= resultSet.getInt(3) %>" onchange="increase('quantity<%= resultSet.id %>', 'price<%= resultSet.id %>', 'baseprice<%= resultSet.id %>')">
    </div>
    <button type="button" class="btn btn-primary btn-box-tool pull-right">
        <i class="fa fa-minus"></i>
    </button>
    <br>
    <br>
    <div class="input-group pull-right col-sm-3">
        <span class="input-group-addon">
            <i class="fa fa-rupee"></i>
        </span>
        <input type="hidden" id="baseprice<%= resultSet.id %>" value="<%= resultSet.getInt(3) %>">
        <input type="text" id="price<%= resultSet.id %>" class="form-control" value="<%= resultSet.getInt(3) %>"  disabled>
    </div>
</div>

当数量发生变化时，onchange应该触发，并且函数现在接收一对具有唯一ID的特定字段。然后该功能只需要进行数学运算并进行更新。

<script type="text/javascript">
    function increase(qelement, pelement, bpelement){
        document.getElementById(qelement).value += 1;
        var dishQuantity = document.getElementById(qelement).value;

        var basePrice = document.getElementById(bpelement).value;
        document.getElementById(pelement).value *= dishQuantity;
    }
</script>

这只是递增数量字段的值，并将基本价格乘以新数量。

这不是复制/粘贴解决方案。可能有一些JavaScript问题，因为我经常使用jQuery。这只是实现你所尝试的一种方法的粗略模型。有更优雅的方式，但这可能是最快的工作。一旦完成，您应该将此作为一个机会来了解JavaScript如何与DOM交互，甚至可能与eventListeners交互。