0

我不明白为什么这个简单的代码没有运行。

我错过了一些东西，但我看不到什么：

网页：

<span class="test" url="mapage.php">It's a test</span>

Javascript：

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

        $('.test').on('click', function () {
            //alert($(this).attr('url'));
            $.fancybox({ 'href': $(this).attr('url') });
        });
    });

});

我在萤火虫中没有任何错误。

小提琴：http: //jsfiddle.net/6ZZJH/4/

4

3 回答 3

2

首先你有嵌套的文档准备功能......

尝试

$(document).ready(function () {

    $('.test').on('click', function () {
        //alert($(this).attr('url'));
        $.fancybox({ 'href': $(this).attr('url') });
    });
});

或者是上面的简写。

 $(function () {

        $('.test').on('click', function () {
            //alert($(this).attr('url'));
            $.fancybox({ 'href': $(this).attr('url') });
        });
});

更新 工作jsfiddle： http: //jsfiddle.net/kasperfish/6ZZJH/9/ 如果你想打开一个url，你需要为iframe指定fancybox类型......

            $(document).ready(function () {

            $('.test').click(function () {

                btn=$(this);

                btn.fancybox({
                    "type": 'iframe',
                    "href": btn.attr('url')
                });


            });
        });
于 2013-09-27T09:47:24.387 回答
0 
  jQuery(function () {
 $(document).ready(function () {

    $('.test').on('click', function () {
        //alert($(this).attr('url'));
        $.fancybox({ 'href': $(this).attr('url') });
    });
 });

});

应该

$(document).ready(function () {
    $('.test').on('click', function () {
        //alert($(this).attr('url'));
        $.fancybox({ 'href': $(this).attr('url') });
    });
 });

并确保在 html 中包含jquery.fancybox.version.js和jquery.fancybox.version.css。

于 2013-09-27T09:48:11.353 回答
0

您有几个问题：首先：您应该这样编写代码：

$(function () {
 //your code here
});

只有当 jQuery 准备好时，它才会触发你的代码。

其次，在你的 jsfiddle 中，fancybox lib 没有被加载。

你应该补充一点：

<link type="text/css" rel="stylesheet" href="//cdn.jsdelivr.net/fancybox/2.1.5/helpers/jquery.fancybox-buttons.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/fancybox/2.1.5/helpers/jquery.fancybox-buttons.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/fancybox/2.1.5/helpers/jquery.fancybox-media.js"></script>
<link type="text/css" rel="stylesheet" href="//cdn.jsdelivr.net/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.js"></script>
<link type="text/css" rel="stylesheet" href="//cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.pack.js"></script>

最后，您的网址必须是图片：

像那样：

<span class="test" url="http://farm3.static.flickr.com/2647/3867677191_04d8d52b1a.jpg">It's a test</span>

这里是jsfiddle：http: //jsfiddle.net/5QYGe/1/

于 2013-09-27T09:59:57.993 回答