.show()
每当我点击产品链接的“缩放”按钮时,我没有看到任何理由不制作自己的 div,而不是使用所有这些灯箱 jquery 插件。(每个产品链接及其缩放按钮都是从数据库中动态加载的)。
因此,我的网站用户只需单击缩放,就会弹出产品正面的特写图像。问题是我还希望用户能够“翻转”并查看产品的背面。(在此过程中,我只是更改了图像的 src $('#closeup')
。但这里有一个问题。第一次翻转通常很好......对于之后放大的每个连续产品,翻转似乎增加了!
所以,第一个产品,用户点击“翻转”:1 从前到后翻转。好的。第二个产品,用户点击“翻转”:1个从前到后翻转,另一个从后到前翻转,所以用户回到了前面的图像!第三个产品,用户点击“翻转”,3次翻转!这是怎么回事?
我试过event.stopPropagation()
了,但没有什么不同。
我的代码如下:
$('.zoom').live('click', function(e){
paths = $(this).attr('data-title').split(";"); // data-title is in the "form front_path;back_path"
// paths[0] now holds path to front image, paths[1] holds path to back image
$('#closeup').attr('src',paths[0]);
$('.flipview').click(function(e){
if($('#closeup').attr('src')==paths[0]){
e.stopPropagation() ;
alert('switching from front '+$('#closeup').attr('src')+' - to back');
$('#closeup').attr('src', paths[1]);
}else{
e.stopPropagation();
alert('switching from back '+$('#closeup').attr('src')+' to front');
$('#closeup').attr('src', paths[0])
}
});
});
因此,本质上,每当放大产品时,.flipview
该类都会获得分配给它的新自定义操作。
从数据库中为单个产品加载的 HTML 是:
<li> <img src="../designs_staff/product0/template0/s16_1350300633/0.jpg">
<a id="s16_1350300633" class="zoom" title="Zoom in" data-title="../designs_staff/product0/template0/s16_1350300633/0.jpg;../designs_staff/product0/template0/s16_1350300633/1.jpg" href="#"> </a>
</li>
以及与产品特写一起弹出的 DIV 的 HTML:
<div id='popup'>
<a href='#' class='flipview'>Flip</a> | <a href='#' id='closepopup'>Close</a>
<br /><img id='closeup' />
</div>