0

我有一个与 jscarousel 2 一起使用的 php 代码

http://www.egrappler.com/jquery-contentthumbnail-slder-v2-0-jscarousel-v2-0/

将数据库中的项目显示为轮播并具有这样的链接

<a id="addtocart" product="<?php echo $productID; ?>" href="#addDiv" >add</a>

和一个隐藏的 div

<div style="display:none">
<div id="addDiv" style="width:300px; height:250px; background-color:#969;">test</div>
</div>

另一个链接仅用于测试，它不像前一个那样在轮播中

问题是：旋转木马内的链接不显示fancybox，而旋转木马外的另一个链接显示fancybox 我试过这个

$(document).ready(function(e) {

$("a#addtocart").fancybox({
        'transitionIn'  : 'elastic',
        'transitionOut' : 'elastic' 
    });
$(document).on("click","a#addtocart",function(){
            $(this).fancybox({
        'transitionIn'  : 'elastic',
        'transitionOut' : 'elastic' 
    });
});
});

请问有什么帮助吗？

4

2 回答 2

1

你到底想做什么？我认为问题是，您正在使用 ID。也许您应该将您正在使用的“点击”事件添加到课程中。每个 ID 可能只在一个 html 文档中出现一次，因此您可以只拥有一个 ID 为 addtocart 的元素。

<a href="#addDiv" class="fancybox" product="<?php echo $productID; ?>">add</a>

试试这个 jQuery：

$(document).ready(function(e) {
    $("a .fancybox").fancybox({
        'transitionIn'  : 'elastic',
        'transitionOut' : 'elastic' 
    });

    $(document).on("click","a .fancybox", function() {
        $(this).fancybox({
            'transitionIn'  : 'elastic',
            'transitionOut' : 'elastic' 
    });
});

当您使用点 (.) 而不是 hashkey (#) 时，您可以使用类而不是 id。

如果这对您没有帮助，您可以在这里找到 jCarousel 和 Fancybox 的实现：http ://www.mccran.co.uk/examples/jcarousel/

于 2013-05-27T13:06:37.227 回答
0

解决方案：刚刚在document.ready的末尾使用了这段代码

$("a.add_to_cart").fancybox({
        'transitionIn'  : 'elastic',
        'transitionOut' : 'elastic' 
    });

并正常工作，但在 document.ready 之后它不起作用

于 2013-05-27T14:08:14.240 回答