Question

我需要重新加载页面，以便我在shopify网站上销售的产品图片可以更改为所选的产品选项，并且只会在重新加载页面时更改图片。应该有其他方法使用更高级的javascript动态更改所选产品图像，而无需刷新整个页面，但这是我自己无法做到的事情，我找不到能为我做这件事的人。

所以我发现只有在触发select函数时才重新加载页面的代码，我认为这种方法对我来说是最简单的替代解决方案。

以下js代码是我目前正在使用的

<script type="text/javascript">
(function($) {
$(document).ready( function() {
$('.select').change(function() {
window.location.reload();
});
});
})(jQuery);
</script>

当在下面的div上选择产品选项时，代码将重新加载我的页面。

<div class="select">
<select id="product-select-{{ product.id }}" name='id'>
{% for variant in product.variants %}
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
{% endfor %}
</select>
</div>

此代码似乎在Chrome，IE和Firefox浏览器上运行良好，它们只重新加载一次页面并为我更改产品图片，但它会不断在Windows桌面版Safari浏览器上重新加载页面。我还没有通过iphone或imac在Safari上测试，因为我没有它们。不知道为什么它只重新加载一次但只能在Safari浏览器上重新加载？

提前谢谢！

Answer 1

以下代码在change上使用div事件，我不知道它在任何浏览器中是如何工作的，但它不能在任何浏览器中工作。

$('.select').change(function() {
  window.location.reload();
});

或许，如果你改变它来获得select，而不是div，它将起作用：

$('.select > select').change(function() {
  window.location.reload();
});

虽然，如果您向我们展示您的图片代码，我们可以为您找到更好的解决方案。

Answer 2

我已经改变了.ready到.click如下所示，它在safari上工作正常。

<script type="text/javascript">
(function($) {
$(document).click( function() {
    $('select').change(function() {
        window.location.reload();
    });
});
})(jQuery);
</script>

只有一次重新加载页面不适用于Safari浏览器的窗口版本

2 个答案: