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

Question

下面的代码我需要一些帮助。

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

ul.cartRecommend1、ul.cartRecommend2、ul.cartRecommend3等

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

有问题的行是：var list = jQuery('ul.cartRecommend');

我的问题是，无论附加到 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>');
        });
    };
  };

//]]>