javascript - 从 javascript 设置 HTML 元素的值

Question

我正在使用 session 变量来跟踪购物车中的商品。我使用循环生成一个表来显示购物车的内容。表的代码如下:

<?php
  $count=0;
  $grandTotal=0;
  foreach($_SESSION['cart'] AS $product) {
    $table=$product['table'];
    $id=$product['id'];
    $Name=$product['name'];
    $qty=$product['quantity'];
    $price=$product['price'];
    $total=$qty*$price;
    $grandTotal +=$total;
?>

<tr>
    <td class="cart_product">
        <img src=<?php $i=2; echo "images/".$table."/".$id.".jpg"?> height="150" width="150">
    </td>
    <td class="cart_description">
        <h4><a href=""><?php echo $Name?></a></h4>
        <p><?php echo "Web ID: ".$id?></p>
    </td>
    <td class="cart_price">
        <p><?php echo $price?></p>
    </td>
    <td class="cart_quantity">
        <div class="cart_quantity_button">
            <a class="cart_quantity_up" href="addToCart.php?table=<?php echo $table ?>&action=inc&id=<?php echo $id ?>" id="increment"> + </a>
            <input class="cart_quantity_input" type="text" name="quantity" id="qty" value="<?php echo $qty?>" autocomplete="off" size="2">
            <!-- <p class="cart_quantity_input" name="qunatity" id="qty"><?php echo $qty?></p>-->
            <a class="cart_quantity_down" href="addToCart.php?table=men&action=dec&id=<?php echo $id ?>" name="decrement" > - </a>
        </div>
    </td>
    <td class="cart_total">
        <p class="cart_total_price"><?php echo $total ?></p>
    </td>
    <td class="cart_delete">
        <a class="cart_quantity_delete" href="addToCart.php?table=men&action=del&id=<?php echo $id ?>"><i class="fa fa-times"></i></a>
    </td>
</tr>

<?php
    }
    $tax=0.15*$grandTotal;
?>

我在使用 a 标记内的 + 和 - 按钮时遇到问题。我想增加或减少名为 quantity 的输入字段中的值。但由于我在循环中生成表，我不知道每个字段的 id。我想做这样的事情:

<script>
    $(document).ready(function () {
        $("#increment").click(function () {
            var oldval=document.getElementById("qty").value;
            var newval=parseInt(oldval);
            document.getElementById("qty").value=newval++;
        });
    });
</script>

但是此方法总是递增表中的第一个数量字段。如何获取表中其他数量字段的 ID？

Answer 1

不要在循环内使用 ids。只需使用类>检查 smaple 演示的代码片段

$(document).ready(function () {
        $(".increment").click(function () {
            var oldval = $(this).prev('.qty').val();
            
            var newval = parseInt(oldval)+ 1;
            
            $(this).prev('.qty').val(newval);
        });
        $(".decrement").click(function () {
            var oldval = $(this).next('.qty').val();
            
            var newval = parseInt(oldval) - 1;
            
            $(this).next('.qty').val(newval);
        });
        
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>    <tr>
              <td>sl No</td>
              <td>name</td>
              <td>Dept</td>
              <td>dummy</td>
              <td>dummy</td>
              <td>dummy</td>
          </tr>

          <tr>
              <td>1</td>
              <td>name</td>
              <td>
                   

              </td>
              <td>name</td>
              <td>name</td>
              <td> </td>
          </tr>


          <tr>
              <td>2</td>
              <td>name</td>
              <td>Dept</td>
              <td>name</td>
              <td> <button class="decrement"> - </button> 
                  <input type="text" class="qty" value="1"/>
                  <button class="increment">+ </button>
                  </td>
              <td>name</td>
          </tr>

          <tr>
              <td>3</td>
              <td>name</td>
              <td>name</td>
              <td>name</td>
              <td>name</td>
              <td>name</td>
          </tr>


      </table>