没有得到正确的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>

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

这不是复制/粘贴解决方案。由于我经常使用 jQuery，因此可能存在一些 JavaScript 问题。这只是实现您正在尝试的一种方法的粗略模型。还有更优雅的方法，但这可能是最快的方法。一旦完成，您应该以此为契机进一步了解 JavaScript 如何与 DOM 交互，甚至可能与 eventListeners 交互。