javascript - 如何修复 Shopify 页面上显示变体时的 JQuery 错误

Question

您好，我正在尝试解决当我尝试显示 2 种以上产品的产品价格时遇到的 jquery 错误。目前我可以使用 2 个产品(显示 1 个产品代码的代码)，但每当我为第三个产品复制以下代码时，我都会收到无响应脚本错误，我不确定这是否与 Shopify 中的内存限制有关2 个产品。

我的 page.prices.liquid 中 1 种产品的代码

<div class="grid">
  <div class="grid_full">
    {% comment %}
      div class="grid__item large--two-thirds push--large--one-sixth" -- old one
    {% endcomment %}
  <div class="grid__item">

    {% for product in collections.leaflets.products %}
   {% for variant in product.variants %}


{% if forloop.index <=1 %}
<div id="temp_first" style="display:none;">
<div class="price"><a href="/products/leaflets?variant={{ variant.id }}">{{ variant.price | money | remove: '.00'}}</a></div>  

{% elsif forloop.index <13 %} 

<div class="price"><a href="/products/leaflets?variant={{ variant.id }}">{{ variant.price | money | remove: '.00'}}</a></div>

{% elsif forloop.index <=13 %}     
<div class="price"><a href="/products/leaflets?variant={{ variant.id }}">{{ variant.price | money | remove: '.00'}}</a></div>
</div>
{% elsif forloop.index ==14 %} 
<div id="temp_second" style="display:none;">
<div class="price"><a href="/products/leaflets?variant={{ variant.id }}">{{ variant.price | money | remove: '.00'}}</a></div>

{% elsif forloop.index <26 %} 
<div class="price"><a href="/products/leaflets?variant={{ variant.id }}">{{ variant.price | money | remove: '.00'}}</a></div>

{% elsif forloop.index ==26 %} 
<div class="price"><a href="/products/leaflets?variant={{ variant.id }}">{{ variant.price | money | remove: '.00'}}</a></div>
</div>

{% elsif forloop.index ==27 %}
<div id="temp_third" style="display:none;">
<div class="price"><a href="/products/leaflets?variant={{ variant.id }}">{{ variant.price | money | remove: '.00'}}</a></div>

{% elsif forloop.index <39 %}  
<div class="price"><a href="/products/leaflets?variant={{ variant.id }}">{{ variant.price | money | remove: '.00'}}</a></div>

{% elsif forloop.index ==39 %}  
<div class="price"><a href="/products/leaflets?variant={{ variant.id }}">{{ variant.price | money | remove: '.00'}}</a></div>
</div> 

{% elsif forloop.index ==40 %} 
<div id="temp_fourth" style="display:none;">
<div class="price"><a href="/products/leaflets?variant={{ variant.id }}">{{ variant.price | money | remove: '.00'}}</a></div>

{% elsif forloop.index <52 %} 
<div class="price"><a href="/products/leaflets?variant={{ variant.id }}">{{ variant.price | money | remove: '.00'}}</a></div>

{% elsif forloop.index ==52 %} 
<div class="price"><a href="/products/leaflets?variant={{ variant.id }}">{{ variant.price | money | remove: '.00'}}</a></div>       
    </div>  

{% endif %}

   {% endfor %}
{% endfor %}

以下是我的页面中的代码:

<script>// <![CDATA[
$i(document).ready(function () {
$("#price_first_row").html($("#temp_first").html());
$("#price_second_row").html($("#temp_second").html());
$("#price_third_row").html($("#temp_third").html());
$("#price_fourth_row").html($("#temp_fourth").html());
// ]]></script>

<div class="grid__item large prices-two">
<div class="prices-title blue">Product Name</div>
</div>
<div id="price_first_row" class="grid__item large prices-three"></div>
<div id="price_second_row" class="grid__item large prices-four"></div>
<div id="price_third_row" class="grid__item large prices-five"></div>
<div id="price_fourth_row" class="grid__item large prices-six"></div>
</div>

我为添加另一个产品而更改的唯一两行是:

{% for product in collections.leaflets.products %}

经过编辑，将传单更改为第三个产品名称，然后将 div id 更改为price_fifth_row 等。

我得到的 jquery 错误如下:

有时会显示 jquery.min.js:2，有时会显示 jquery.min.js:3。

我本来想分享该网站的链接，但目前该链接已被密码锁定。

如果有人愿意，我将不胜感激。

谢谢

下面显示的脚本是另一个脚本的一部分，因此 $i 存在 jquery 冲突。

<script>// <![CDATA[
$(document).ready(function () {
$("#price_first_row").html($("#temp_first").html());
$("#price_second_row").html($("#temp_second").html());
$("#price_third_row").html($("#temp_third").html());
$("#price_fourth_row").html($("#temp_fourth").html());
    var carousel = $i("#owlCarousel-Prices");
  carousel.owlCarousel({
    items: 3,
    margin:10,
    navigation:true,
    autoHeight : true,
    autoPlay : 3000,
    navigationText: [
      "<i class='icon-chevron-left icon-white'><</i>",
      "<i class='icon-chevron-right icon-white'>></i>"
      ],
  });
});
// ]]></script>

Answer 1

这是修复后的 JavaScript 代码:

<script type="text/javascript">
//<![CDATA[
    $(document).ready(function() {
        $("#price_first_row").html($("#temp_first").html());
        $("#price_second_row").html($("#temp_second").html());
        $("#price_third_row").html($("#temp_third").html());
        $("#price_fourth_row").html($("#temp_fourth").html());
    });
//]]>
</script>

在document.ready之前有一个i，并且您没有关闭该函数。它对您无响应的页面有帮助吗？