可以't对同时具有.thoggle(）函数的元素启动FancyBox

Can't fire FancyBox on an element that also has a .toggle() function

本文关键字：thoggle 函数 FancyBox 启动 元素 可以      更新时间：2023-09-26

我遇到了一个奇怪的问题，似乎无法解决。我试着在SO和其他网站上搜索，但似乎无法解决这个愚蠢的问题。

这是我的问题-我正在使用FancyBox通过AJAX加载一些页面。我做得很好。

我还有一些元素使用.toggle();将其类更改为"active"以更改样式。

两人各自工作都很好。问题是，我有一个标志图标，它应该加载一个FancyBox实例，同时它需要向图标添加一个"active"类。其想法是，一旦保存了表单，就会应用一个标志，用户就会知道有一个标志与该数据位相关。

这是我的JS代码：

            $('.activate').toggle(function() {
                 $(this).addClass('active');
            }, function() {
                 $(this).removeClass('active');
            });
            $('.activate.active').toggle(function() {
                 $(this).removeClass('active');
            }, function() {
                 $(this).addClass('active');
            });
            $('.popup').fancybox({
                 autoDimensions: true,
                 modal: true
            });

您看到的是两个独立的函数，它们可以打开/关闭类（其中一些元素将加载为活动元素，这就是为什么有两个函数）。

这是我的HTML:

<a class="activate popup fancybox.ajax icon flag" href="flag-rock.aspx">text</a>

"active"类加载toggle函数，"popup"类加载FancyBox函数，"FancyBox.ajax"告诉FancyBox通过ajax加载内容。"icon"answers"flag"只是设置锚的样式。

所以，这是我的交易。如果我移除"活动"的FancyBox有效，否则，我会得到类的切换，但不会触发FancyBox。我也没有在firebug或Chrome的开发工具中得到任何错误。

我甚至尝试过这样的东西：

            $('.activate').toggle(function() {
                $(this).fancybox({
                    autoDimensions: true,
                    modal: true
                }).addClass('active');
            }, function() {
                $(this).removeClass('active');
            });

发生的情况是，图标会使类处于活动状态，但不会激发FancyBox。如果我再次单击它，它确实会激发FancyBox，但只有在该元素被单击两次之后。

您可以在此处查看页面：http://ec2-50-16-99-3.compute-1.amazonaws.com/aptify/rocks/global-rocks.aspx单击数据行右侧的"标志"图标。

有什么想法吗？

解决方案

好的，所以感谢下面每个人的帮助，这里是适用于我的解决方案。

jQuery:

        $('.popup, .active').fancybox({
                autoDimensions: true,
                modal: true
            });
            $('.activate').click(function()
            {
                $(this).toggleClass('active off');
                event.preventDefault()
            });

HTML:

<a class="activate off fancybox.ajax icon flag" href="flag-rock.aspx">Stuck Rock</a>''

preventDefault()在没有打开标志的情况下阻止超链接工作。否则，你会在窗口中加载传统的页面，这不是我们想要的。

可能有更好的方法可以做到这一点，但这就是我所知道的解决打开标志时页面加载问题的全部方法。

我认为你应该在文档中只应用一次fancybox。ready

此外，你应该调查http://api.jquery.com/toggleClass/为你的班级切换。

但我认为你真正想要的是onStart和onClosed事件来切换你的标志。这样，当页面在花式框中打开时，您的标志就会处于活动状态。

试试这样的东西：

    $(function(){
          $('#fancything').fancybox({
               autoDimensions: true,
               modal: true
          });
          $('.activate').click(function(){
                $(this).addClass('active').removeClass('popup fancybox.ajax')
          });
    });

在click事件处理程序之前设置fancybox，以便它可以进行第一次单击，怎么样？您在第一次单击时设置fancybox，以便在第二次单击时做好准备，只需在元素上运行fancybox插件，同时通过.toggle():绑定click事件处理程序

        $('.activate').fancybox({
            autoDimensions: true,
            modal: true
        }).toggle(function() {
            $(this).addClass('active');
        }, function() {
            $(this).removeClass('active');
        });

我刚刚测试了这个，当我在你的页面上运行这个代码时，它会在第一次点击标志图标时弹出显示。

相关文章：