Question

我们有一个网站，左边是我们展示的产品，右边是显示用户点击的产品（在同一页面上）。当页面加载时，默认情况下我们会在右侧显示第一个产品，当用户点击新产品时，右列会更改以显示新产品（通过ajax）。

以下是我如何设置ajax：

<script>
jQuery(document).ready(function($){
    var defaultValue = $("ul.products li.shop-thumb a:first").attr("href");

    $(".main").load(defaultValue);

  $("ul.products li.shop-thumb a").click(function(e){
      e.preventDefault();

      var addressValue = $(this).attr("href");
      //alert(addressValue );
    $(".main").load(addressValue);

    //$("a.woocommerce-main-image").addClass("image-popup-no-margins");

  });

});
</script>

当用户点击（右侧）主要产品图片时，我们使用大幅弹出窗口显示产品的较大图像。

这适用于第一个（默认）产品，但当用户点击新产品并且右侧内容发生变化时，用户点击主图像，弹出窗口无法加载。换句话说，当你第一次加载页面并显示默认产品时，它会起作用，但是当点击新产品时却无法触发。

这是product-image.php过滤器，它只添加了我们的图像 - 弹出 - 无边距类：

apply_filters( 'woocommerce_single_product_image_html', sprintf( '<a href="%s" itemprop="image" class="woocommerce-main-image image-popup-no-margins" title="%s">%s</a>', $image_link, $image_title, $image ), $post->ID );

在页脚中我们有这个：

$('.image-popup-no-margins').magnificPopup({
      type: 'image',
      closeOnContentClick: true,
      closeBtnInside: false,
      fixedContentPos: true,
      mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
      image: {
        verticalFit: true
      },
      zoom: {
        enabled: true,
        duration: 300 // don't foget to change the duration also in CSS
      }
    });

我可能在这里给出了太多的信息，但我感觉更安全然后抱歉，所以如果我给你一个链接让你看看我的意思，也许会更好。当您访问该页面时，单击右侧的大图，您应该看到弹出功能。现在尝试单击左侧的其中一个产品，使右侧的主图像发生变化并尝试再次单击它，默认行为发生而不是弹出。

我检查了课程，一切看起来都很好，我确定它与ajax有关，但无法解决问题。

更新在对此进行更多修补之后，我认为问题是.load在单击锚点时没有“重新加载”内容。就像我说的那样，当你第一次加载页面并点击第一张图片时，它会起作用，但是当你更改图像并调用ajax时，我认为它并没有真正重新加载主容器中的内容。我如何确保ajax像第一次打开页面时一样完全加载内容？如果你去网站点击右边的大图片，它就可以了，通过点击左边的产品来改变图像，弹出窗口无法正常工作，弹出“Tag It”就好了...也许这样就少了特定的大型弹出窗口和更多的基本ajax

Answer 1

看起来你的服务器速度很慢，并且提供了新弹出窗口所需的内容。您可以通过查看firebug控制台查看获取请求。一旦这些完成它完美的工作。我建议升级托管或寻找另一种方式来更快地提供更高质量的图像，例如imgur或其他图像托管服务。

Answer 2

所以问题确实出现在巨大的弹出窗口中，用Fancybox取而代之，而且所有功能似乎都正常 - 感谢帮助人员

如何确保ajax使用.load完全加载内容

2 个答案: