Question

这是在网上商店的背景下，我的问题不完全是基于代码的，它更基于理论/概念。我会尽量详细说明，但如果有任何含糊之处，我会很乐意进一步说明。

我有两个例子。第一个是在产品页面上，当您有主图片视图时，其下方的缩略图显示产品的不同视图。当您单击缩略图时，它会将您在缩略图中单击的图片与主视图中的图片交换。

第二个示例位于产品登录页面上，其中小视图图片有一个“快速查看”按钮，弹出一个“快速查看”按钮，显示产品的简要详细信息，主要图片视图，然后显示缩略图不同意见。单击缩略图时，应执行与上述相同的操作。它应该将主视图图片与您单击的缩略图交换，但不是。

运行此功能的javascript功能齐全。同一个用于产品页面和登录页面，它适用于产品页面。缩略图交换出来，一切正常。但是在着陆页上，脚本没有触发。

它没有在chrome的调试器中的quickview缩略图上显示事件监听器，而是在产品页面的缩略图上显示事件。我相信我可能知道什么是错的。

脚本成功绑定到产品页面上的缩略图，因为在产品页面上缩略图显示在页面加载上。他们就在那里。登录页面上的快速查看缩略图在页面加载时没有缩略图，只有当您单击快速查看按钮时它们才会“存在”。我将在下面添加一小段代码，显示相关元素的基本结构。

解决这个问题的最佳方法是什么？我需要将eventlistener绑定到quickview中的缩略图。

<script type="text/javascript">
//<![CDATA[
    abcd.picturezoom= Class.create({

        initialize: function () {
            ...
        },

        swap: function (event, elem) {
            ...
        },

        open: function (event) {
            ...
        },

        opensub: function (event) {
            ...
        },

        bindQuickViewPopup: function (event) {
            ...
        },

        switchModalImage: function (event) {

        }

    });

    document.observe("dom loaded", function () {
        picturezoom
    });

    <?php if($isQuickview): ?>
        ...
        });

    });
    <?php endif; ?>
    //]]>

快速查看和产品页面HTML：

        <?php foreach ($this->images() as $_image): ?>

        <a imagenum="<?php ... ?>"

        data-main-image="<?php ... img?>"

        href="<?php ... imgfile ?>"

        class="<?php ... class name ?>"

        rel=' ... '

        id="gallery-thumbnail-quickview">

        <img src="<?php ... img?>"

        width="..." height="..." alt="<?php ... ?>" /></a>

        <?php endforeach; ?>

我该如何处理这个问题？朝着正确方向迈出的几步是什么？编码部分并不是真正的问题，我在找到从哪里开始时遇到了很多麻烦。

Answer 1

我可以想到两个解决方案。

不是立即执行缩略图初始化逻辑，而是将其移动到在完整产品页面加载和打开quickView图层时调用的函数。
在执行脚本时确实存在的链中较高的位置使用委托事件处理程序。

委托快速使用jQuery：

$(document).on('click.thumbnail', 'a.thumbnail_link', function(e){
    ...
});

您也可以在纯JavaScript中构建委派事件处理：DOM Event Delegation without jQuery

如果init逻辑需要特定于产品的信息，并且您可以从单个页面打开多个QuickView图层，这是典型的，第一个解决方案可能更可取。

Javascript：脚本无法在产品目标网页上快速浏览

1 个答案: