Question

我有一个与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>

和另一个仅用于测试的链接，它不像前一个那样在旋转木马内

问题是：旋转木马内的链接不显示花式框，而旋转木马外的其他链接显示我试过的花式框

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

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

有什么帮助吗？

Answer 1

你到底想做什么？我认为问题是，你正在使用ID。也许您应该将正在使用的“click”事件添加到课程中。每个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/

Answer 2

解决方案：刚刚在document.ready

的末尾使用了这段代码

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

并正常工作，但在document.ready使其无法正常工作

fancybox无法使用jscarousel 2

2 个答案: