1

.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>
4

1 回答 1

1

好的，我明白了。问题是有许多产品可以放大，但所有产品都使用一个弹出窗口。因此，对于每个放大的按钮，都附加了一个新的点击功能$('.flipview')。因此，每次缩放都会为每次翻转增加一个切换。

修复只是在切换图像源之前删除现有的单击事件处理程序：

    $('.flipview').unbind('click');
于 2012-11-04T12:23:57.760 回答