1

我有以下链接，单击时应该显示fancyboxes——在这里使用jquery插件：http: //fancyapps.com/fancybox/ 

<div class="boxes">
    <a href="/signup.html" class="btn popup-link fancybox.ajax">Sign Up</a>
    <a href="/signin.html" class="btn popup-link fancybox.ajax">Sign In</a>
   </div>

我遇到的问题是fancybox 仅适用于第一个链接。在流星中，我有：

Template.mytemplate.rendered = function () {

        console.log($(this.find('a.popup-link')));
        $(this.find('a.popup-link')).fancybox({
            padding: 18,
            openMethod: 'changeIn',
            closeBtn   : false,
            beforeShow: function() {
                $('input:checkbox').ezMark();
                $('select').selectbox();

                $('.trigger-ajax').on('click', function(e) {
                    e.preventDefault()
                    $('.fancybox-wrap').animate({ 'left': '-100%'}, 400, function() {
                        $(this).parent().find('.popup-link').trigger('click');
                    })
                })
            }
        });

}

当我单击第一个链接时，我的幻想框按预期加载，但是当我单击第二个链接时，什么也没有发生。

通过 console.log 它也清楚地发现 find 只返回第一个元素......因此出现了问题。

请注意，如果我('a.popup-link')不使用find.

这是怎么回事？谢谢！

4

2 回答 2

3

如果您尝试使用 Meteor 模板方法（不是 jQuery find()方法） ，请使用this.findAll('a.popup-link')而不是。this.find('a.popup-link')

但是，findAll()返回一个 DOM 元素数组，我不确定 $() 是否会接受它作为参数。如果没有，您可以循环遍历数组的元素。

于 2013-04-08T17:41:43.427 回答
2

我认为你正在使用不同的find方法。采用：

$(this).find('a.popup-link').fancybox({

我不确定this.find('a.popup-link')过去是如何工作的，但我想这取决于什么this和find做过/做过什么。要使用 jQuery 方法find，您需要一个 jQuery 对象。就是$(this)这样。从那里，您可以找到带有 .popup-link 的“a.popup-link”后代find。

于 2013-04-08T17:34:30.990 回答