Question

我想做什么：

当我点击馆藏页面网格中的某个产品时，我试图使用ajax获取该产品的标题等。

继承我的代码：

{% for product in collection.products %}

<div class="product">
 {% capture producturl %}{{ product.url }}{% endcapture %}
 <a class="ajax ajax{% increment ajaxno %}">
 PRODUCT IMAGE 
 </a> 
</div>


<script>
jQuery(function ($) { 

  $("a.ajax0").click(function(){
    jQuery.getJSON('{{ producturl }}.js', function(product) {
      console.log('The title of this product is ' + product.title);
    } );
  });

});
</script>

{% endfor%}

但是当我点击任何产品时，我会收到当前页面上所有产品的提醒。我如何调整我的代码只能获得我点击的产品的标题？

Answer 1

您可以在不使用AJAX的情况下执行此操作：

{% for product in collection.products %}
  <div class="product">
   <a class="product-image" data-title="{{product.title}}">
    PRODUCT IMAGE 
   </a> 
  </div>
{% endfor%}

<script>
  jQuery(function($) { 
    $("a.product-image").click(function() {
      console.log($(this).data('title'));
    });
  });
</script>

如果由于某种原因你更喜欢使用AJAX，这应该可以正常工作：

{% for product in collection.products %}
  <div class="product">
   <a class="product-image" data-url="{{product.url}}">
    PRODUCT IMAGE 
   </a> 
  </div>
{% endfor%}

<script>
jQuery(function($) {
  $("a.product-image").click(function(){
    var productUrl = $(this).data('url');
    jQuery.getJSON(productUrl + '.js', function(product) {
      console.log('The title of this product is ' + product.title);
    } );
  });
});
</script>

从shopify中的一个产品中获取json数据

1 个答案: