Question

foreach($products as $row){
  <input type="hidden" class="prodId" name="id" value="<?php echo $row['id']; ?>">
  <input type="hidden" class="prodUnique" name="unique" value="<?php echo $unique; ?>">
  <button id="added" onClick="addToCart()" class="button btn-cart" title="Add to Cart" type="button"><span><i class="icon-basket"></i> Add to Cart</span></button>
}

<script>
function addToCart(){
   var id = $(".prodId").val();
   var unique = $(".prodUnique").val();
   console.log(id);
}
</scritp>

每次仅显示第一个产品ID。意味着ID可以正确显示在HTML中，但是当我在javascript中进行控制台时，它显示的ID相同。假设有4个产品的ID为100、101、103、105，那么每当我单击任何产品时，每次在javascript中使用控制台的值都是100。

Answer 1

您应该这样做，

$(".someClassSelector").each((key, element) => {
    let value = $(element).val();
    /*
        Use your logic
    */
});

Answer 2

forEach()是一种JavaScript方法。

因此，您正在$products上循环2个输入和一个按钮，PHP早在服务器端已在其中执行...在开始执行JS之前很久。这意味着该客户端循环的每次迭代的值相同。

有关此其他答案的更多阅读：https://stackoverflow.com/a/13840431/2159528

Answer 3

除了单击功能外，您还可以在单击按钮时发生click事件，并通过自定义属性选择值。参考代码。

foreach($products as $row){
  <button id="added" prodUnique="<?php echo $unique; ?>" prodId="<?php echo $row['id']; ?>" class="button btn-cart" title="Add to Cart" type="button"><span><i class="icon-basket"></i> Add to Cart</span></button>
}

<script>
$(document).ready(function(){
    $('.added').click(function(){
        var id = $(this).attr('prodId');
        var unique = $(this).attr('prodUnique')
        console.log(id);
    });
});
</scritp>

JavaScript从for循环中的html类名称获取值不起作用

3 个答案: