0

我有一个 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）？谢谢！

4

1 回答 1

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在你实际做事之前放置。

于 2013-10-25T03:40:40.907 回答