Question

我有一个奇怪的问题，我似乎无法弄明白。我尝试在SO和其他网站上搜索，但我似乎无法解决这个愚蠢的问题。

这是我的问题 - 我正在使用FancyBox通过AJAX加载一些页面。我的工作正常。

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

两者对自己的工作都很好。问题是我有一个标志图标应该加载FancyBox实例，同时它需要在图标中添加一个“活动”类。这个想法是，一旦表单被保存，就会应用一个标志，并且用户知道有一个与该位数据相关联的标志。

这是我的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”和“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()在未切换标记时保持超链接不起作用。否则你会在窗口中得到传统的页面加载，这不是我们想要的。

可能有更好的方法可以做到这一点，但这就是我知道如何在切换标志时解决页面加载问题。

Answer 1

如何在click事件处理程序之前设置fancybox-up，以便第一次点击就可以了？您在第一次单击时设置了fancybox，以便在第二次单击时准备就绪，只需在通过{{1}绑定fancybox事件处理程序的同时在元素上运行click插件}}：

.toggle()

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

Answer 2

我认为你应该只在doc.ready

中应用一次fancybox

此外，您应该查看http://api.jquery.com/toggleClass/以便您的班级切换。

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

尝试这样的事情：

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

无法在也具有.toggle（）函数的元素上触发FancyBox

2 个答案: