每个数据只出现1个数据，访问每个数据时结果未定义

Question

我有一个产品 div，它包含 data-product 属性，它的值为对象。我想把产品数据放到gtag中。

但是为什么我每做一次都只有1条数据？当我想访问 data.id 和 data.name 时，为什么未定义？

$(document).ready(function(){
  const promotions = []
  
    $(".product-item").each(function(){
    const data = $(this).data('product');
    
    promotions.push({
      "id": data.id,
      "name": data.name
    })
  })
  
  //gtag('event', 'view_promotion', {
    //promotions
  //});
  
  $('.product-item').each(function(){
    $(this).on("click", function(e){
      const data = $(this).data('product')
      console.log(data)
    })
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-item" data-product='{"id" : 123, "name" : "Product 1"}'>
  Product 1
</div>
<div class="product-item" data-product='{"id" : 124, "name" : "Product 2"}'>
  Product 2
</div>
<div class="product-item" data-product='{"id" : 125, "name" : "Product 3"}'>
  Product 3
</div>

Answer 1

更改您的 HTML 代码，对我有用：

<div class="product-item" data-product='{"id":124,"name":"Product 1"}'>
    Product 1
</div>
<div class="product-item" data-product='{"id":125,"name":"Product 2"}'>
    Product 2
</div>
<div class="product-item" data-product='{"id":126,"name":"Product 3"}'>
    Product 3
</div>

Answer 2

根据 API，属性值必须是有效的 JSON，包括引用的属性名称。

在您的情况下，它的格式不正确 JSON 因此，它不起作用。将您的 data-product 格式化为有效 JSON.

JSON 固定后，循环促销

$(document).ready(function(){
  let promotions = []
  $(".product-item").each(function(){
    const data = $(this).data('product');
        
    promotions.push({
      "id": data.id,
      "name": data.name
    })
  })
      
           
  gtag('event', 'view_promotion', {
    promotions
  });
})

每个数据只出现1个数据，访问每个数据时结果未定义

Each data only appears 1 data, and when access each data the result is undefined

javascript

jquery

object

gtag.js