Question

我的代码需要一些帮助。

基本上我需要做的就是在ul.cartRecommend类中添加一个数字，如下所示：

ul.cartRecommend1，ul.cartRecommend2，ul.cartRecommend3等。

每次循环发生时都需要这样做。

有问题的一行是：var list = jQuery（＆＃39; ul.cartRecommend＆＃39;）;

我的问题是，无论附加到ul.cartRecommend的变量项属于哪个循环，都要添加所有项目。我需要他们在单独的名单中。

{% for item in cart.items reversed %}
{% if item.product.metafields.recommendations.productHandles %}
{% assign cartRecommend = item.product.metafields.recommendations.productHandles | split: ',' %}
<div class="recommendColumn hide-mobile">
      <div class="cart-recommend-contain">
        <h5>Customers who bought the "{{item.title}}", also bought:</h5>
      </div>
        <ul class="cartRecommend[someNumber]">
        </ul>
    </div>

{% assign image_size = "thumb" %}
<script type="text/javascript" charset="utf-8">
//<![CDATA[
  var recommendations = [];
  {% if cartRecommend %}
  recommendations = jQuery.trim({{ cartRecommend | json }}).split(/[\s,;]+/);
  {% endif %}

  if (recommendations.length && recommendations[0] !== '') {
    var list = jQuery('ul.cartRecommend[correspondingNumberForLoop]');
    for (var i=0; i<5; i++) {
      jQuery.getJSON( '/products/' + recommendations[i] + '.js', function(product) {
        list.append('<a class="cartRecommend" href="' + product.url +'"><li class="cartRecommend"><img style="padding:0 0.75em 100% 0;" align="left" src="' + product.images[0].replace(/(\.jpg|\.png|\.jpeg|\.gif)/, '_{{ image_size }}$1') + '" />' + product.title + '<br /><span class="money" style="color:#f03d04;">' + Shopify.formatMoney(product.price, '{{ shop.money_format }}') + '</span></li></a>');
        });
    }
  }
//]]>
</script>
{% endif %}
{% endfor %}

代码生成后，它看起来像这样：

//<![CDATA[
  var recommendations = [];
  var num = ['one', 'two', 'three'];

  recommendations = jQuery.trim(["two-rock-studio-pro-plus-50-head","two-rock-studio-pro-35-head-wine-taurus"]).split(/[\s,;]+/);


  if (recommendations.length && recommendations[0] !== '') {
    var list = jQuery('ul.cartRecommend');
    for (var i=0; i<5; i++) {
      jQuery.getJSON( '/products/' + recommendations[i] + '.js', function(product) {
        list.append('<a class="cartRecommend" href="' + product.url +'"><li class="cartRecommend"><img style="padding:0 0.75em 100% 0;" align="left" src="' + product.images[0].replace(/(\.jpg|\.png|\.jpeg|\.gif)/, '_thumb$1') + '" />' + product.title + '<br /><span class="money" style="color:#f03d04;">' + Shopify.formatMoney(product.price, '$ {{amount}}') + '</span></li></a>');
        });
    }
  }
//]]>

//<![CDATA[
  var recommendations = [];
  var num = ['one', 'two', 'three'];

  recommendations = jQuery.trim(["cuspcafordrz","drzbrlimiaia","lacablde20ft","lacaso20ftst","stslpaco1xca"]).split(/[\s,;]+/);


  if (recommendations.length && recommendations[0] !== '') {
    var list = jQuery('ul.cartRecommend');
    for (var i=0; i<5; i++) {
      jQuery.getJSON( '/products/' + recommendations[i] + '.js', function(product) {
        list.append('<a class="cartRecommend" href="' + product.url +'"><li class="cartRecommend"><img style="padding:0 0.75em 100% 0;" align="left" src="' + product.images[0].replace(/(\.jpg|\.png|\.jpeg|\.gif)/, '_thumb$1') + '" />' + product.title + '<br /><span class="money" style="color:#f03d04;">' + Shopify.formatMoney(product.price, '$ {{amount}}') + '</span></li></a>');
        });
    }
  }
//]]>

正如您所看到的那样，建议变量随着每个循环的变化而变化，但它们都被放入列表中。所以每个ul看起来都一样。

我知道有一个简单的解决方案。请帮忙！

Answer 1

您每次都选择相同的项目（'ul.cartRecommend'），并为每个响应循环播放 - 所有.cartRecommend UL元素都会以所有时间添加的所有项目结束，无论如何命令JS解决。您需要选择要附加结果的ul.cartRecommend的某个子集。

Answer 2

好吧，在一些液体的帮助下，我能够指定一个特定的ul类来发送数据。麻烦的是它只将循环发送到最后一个ul。

像这样：

来源：

      <div class="cart-recommend-contain">
        <h5>Customers who bought the these items, also bought:</h5>
      </div>
{% for item in cart.items %}
{% if item.product.metafields.recommendations.productHandles %}
{% assign cartRecommend = item.product.metafields.recommendations.productHandles | split: ',' %}

    <div class="recommendColumn hide-mobile">
        <ul class="cartRecommend cart{{forloop.index}}">
        </ul>
    </div>

{% assign image_size = "thumb" %}
<script type="text/javascript" charset="utf-8">
//<![CDATA[
  var recommendations = [];
  {% if cartRecommend %}
  recommendations = jQuery.trim({{ cartRecommend | json }}).split(/[\s,;]+/);
  {% endif %}

  if (recommendations.length && recommendations[0] !== '') {
    var list = jQuery('ul.cartRecommend.cart{{ forloop.index }}');
    for (var i=0; i<5; i++) {
      jQuery.getJSON( '/products/' + recommendations[i] + '.js', function(product) {
        list.append('<a class="cartRecommend" href="' + product.url +'"><li class="cartRecommend"><img style="padding:0 0.75em 2.5em 0;" align="left" src="' + product.images[0].replace(/(\.jpg|\.png|\.jpeg|\.gif)/, '_{{ image_size }}$1') + '" />' + product.title + '<br /><span class="money" style="color:#f03d04;">' + Shopify.formatMoney(product.price, '{{ shop.money_format }}') + '</span></li></a>');
        });
    };
  };

//]]>
</script>
{% endif %}
{% endfor %}

输出：

//<![CDATA[
  var recommendations = [];

  recommendations = jQuery.trim(["two-rock-studio-pro-plus-50-head","two-rock-studio-pro-35-head-wine-taurus"]).split(/[\s,;]+/);


  if (recommendations.length && recommendations[0] !== '') {
    var list = jQuery('ul.cartRecommend.cart1');
    for (var i=0; i<5; i++) {
      jQuery.getJSON( '/products/' + recommendations[i] + '.js', function(product) {
        list.append('<a class="cartRecommend" href="' + product.url +'"><li class="cartRecommend"><img style="padding:0 0.75em 2.5em 0;" align="left" src="' + product.images[0].replace(/(\.jpg|\.png|\.jpeg|\.gif)/, '_thumb$1') + '" />' + product.title + '<br /><span class="money" style="color:#f03d04;">' + Shopify.formatMoney(product.price, '$ {{amount}}') + '</span></li></a>');
        });
    };
  };

//]]>


//<![CDATA[
  var recommendations = [];

  recommendations = jQuery.trim(["cuspcafordrz","drzbrlimiaia","lacablde20ft","lacaso20ftst","stslpaco1xca"]).split(/[\s,;]+/);


  if (recommendations.length && recommendations[0] !== '') {
    var list = jQuery('ul.cartRecommend.cart4');
    for (var i=0; i<5; i++) {
      jQuery.getJSON( '/products/' + recommendations[i] + '.js', function(product) {
        list.append('<a class="cartRecommend" href="' + product.url +'"><li class="cartRecommend"><img style="padding:0 0.75em 2.5em 0;" align="left" src="' + product.images[0].replace(/(\.jpg|\.png|\.jpeg|\.gif)/, '_thumb$1') + '" />' + product.title + '<br /><span class="money" style="color:#f03d04;">' + Shopify.formatMoney(product.price, '$ {{amount}}') + '</span></li></a>');
        });
    };
  };

//]]>

使用For循环将变量附加到Class

2 个答案: