Javascript从for循环中的html类名获取值不起作用答案

【问题标题】：Javascript get value from html class name in for loop not workingJavascript从for循环中的html类名获取值不起作用
【发布时间】：2018-07-22 16:53:01
【问题描述】：

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。

【问题讨论】：

该选择器将返回您必须循环并获取值的对象列表。
因为在 HTML 中，类表示一组对象。多个元素可以属于同一个类。
你能用基本的代码示例展示吗？
另请注意，您在循环中使用 id 作为静态值。这将导致按钮的多个元素具有相同的 id。这在 HTML 中是不允许的，因为每个 id 都必须是唯一的。
What is the difference between client-side and server-side programming?的可能重复

标签： javascript php jquery

【解决方案1】：

你应该做这样的事情，

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

【讨论】：

【解决方案2】：

forEach() 是一个 JavaScript 方法。

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

更多阅读其他 SO 答案：https://stackoverflow.com/a/13840431/2159528

【讨论】：

【解决方案3】：

您可以在单击按钮时设置单击事件，并通过自定义属性选择值，而不是调用函数。参考代码。

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>

【讨论】：