Question

我有一个Shopify商店，当有该产品的颜色变体时，在特色图片下面有缩略图。单击缩略图图像时，它会使用较大版本的缩略图替换特色图像。这在通常的Chrome，Firefox，Safari中效果很好，但它在IE10中不起作用。在IE10中，当我单击缩略图时，它会在新窗口中打开大版本，而不是替换图像。

这是我的HTML：

{% if product.images.size > 1 %}
      <ul id="product-photo-thumbs" class="clearfix grid">
        {% for image in product.images %}
        <li class="product-photo-thumb">
          <a href="{{ image.src | product_img_url: 'grande' }}">
            <img src="{{ image.src | product_img_url: 'small' }}" alt="{{ image.alt | escape }}" />
          </a>
        </li>
        {% endfor %}
      </ul>
      {% endif %}

这是javascript：

  // Load variant image into feature area
  $('.product-photo-thumb a').click(function() {
    var url = $(this).attr('href');
    $('#product-photo-container img').attr('src',url);
    event.preventDefault();
  });

任何想法（除了告诉我的客户停止使用IE：P）？谢谢！

Answer 1

试试这个：

// Load variant image into feature area
$('.product-photo-thumb a').click(function(e) {
    e.preventDefault();
    var url = $(this).attr('href');
    $('#product-photo-container img').attr('src',url);
});

我认为你需要两件事，一个变量，使用e而不是event来避免关键字冲突。在你真正做事之前放置preventDefault。

IE10单击缩略图可在新窗口中打开大图像，而不是替换特色图像

1 个答案: