这是在网上商店的背景下,我的问题不完全是基于代码的,它更基于理论/概念。我会尽量详细说明,但如果有任何含糊之处,我会很乐意进一步说明。
我有两个例子。第一个是在产品页面上,当您有主图片视图时,其下方的缩略图显示产品的不同视图。当您单击缩略图时,它会将您在缩略图中单击的图片与主视图中的图片交换。
第二个示例位于产品登录页面上,其中小视图图片有一个“快速查看”按钮,弹出一个“快速查看”按钮,显示产品的简要详细信息,主要图片视图,然后显示缩略图不同意见。单击缩略图时,应执行与上述相同的操作。它应该将主视图图片与您单击的缩略图交换,但不是。
运行此功能的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; ?>
我该如何处理这个问题?朝着正确方向迈出的几步是什么?编码部分并不是真正的问题,我在找到从哪里开始时遇到了很多麻烦。
答案 0 :(得分:0)
我可以想到两个解决方案。
不是立即执行缩略图初始化逻辑,而是将其移动到在完整产品页面加载和打开quickView图层时调用的函数。
在执行脚本时确实存在的链中较高的位置使用委托事件处理程序。
委托快速使用jQuery:
$(document).on('click.thumbnail', 'a.thumbnail_link', function(e){
...
});
您也可以在纯JavaScript中构建委派事件处理:DOM Event Delegation without jQuery
如果init逻辑需要特定于产品的信息,并且您可以从单个页面打开多个QuickView图层,这是典型的,第一个解决方案可能更可取。