0

FancyBox を使用する簡単な例があります

<script type="text/javascript">
    (function($) {
        $(document).ready(function() {
            $('#fbLink1').fancybox({
                'afterLoad': function() {
                    $('#fancyboxdiv').html('<h1>Fancybox first</h1>');
                    $('#fancyboxdiv').append('<a id="fbLink2" href="#fancyboxdiv" title="fancybox 2">Fancybox second</a>');
                },
                'afterClose': function() {
                    $('#fancyboxdiv').html('');
                }
            });
            $('#fbLink2').fancybox({
                'afterLoad': function() {
                    $('#fancyboxdiv').html('<h1>Fancybox second</h1>');
                    $('#fancyboxdiv').append('<a id="fbLink1" href="#fancyboxdiv" title="fancybox 1">Fancybox first</a>');
                },
                'afterClose': function() {
                    $('#fancyboxdiv').html('');
                }
            });
        });
    })(jQuery);
</script>
<div id="fancyboxdiv" style="display: none;"></div>     
<a id="fbLink1" href="#fancyboxdiv" title="fancybox first">First</a><br />
<a id="fbLink2" href="#fancyboxdiv" title="fancybox first">Second</a><br />

Chrome ブラウザでは問題なく動作しますが、Internet Explorer では動作しません。IE8 以前のバージョンで動作させるにはどうすればよいですか?

4

1 に答える 1

0

まず、fancybox のドキュメント-->FAQ タブ --> No. 6 を確認してください。

これは、私の意見では、IE がより優れたブラウザーである典型的なケースです。これは、重複した要素ID(ID は一意である必要があり、2 つの要素がID同じドキュメント内で同じであってはならない) を持つ要素を操作できないためです)。

そうは言っても、あなたがしているのは、ID以前に定義された を持つ2 番目の要素を追加することです。

$('#fancyboxdiv').append('<a id="fbLink2" href="#fancyboxdiv" title="fancybox 2">Fancybox second</a>');

他のブラウザではこのような重複した ID を操作できますが、IE ではできません。

ID をセレクターとして使用して各要素の fancybox を既に初期化しているため、 $('#fbLink1').fancybox();次のような重複した ID を追加する代わりに、 $('#fbLink2').fancybox();各セレクターを ( を使用して) トリガーするだけで済みます。onclick

(function ($) {
    $(document).ready(function () {
        $('#fbLink1').fancybox({
            beforeShow: function () {
                $('#fancyboxdiv').html('<h1>Fancybox first</h1>');
                $('#fancyboxdiv').append('<a onclick="javascript:$(\'#fbLink2\').click();" href="javascript:;" title="fancybox 2">Fancybox second</a>');
            },
            afterClose: function () {
                // $('#fancyboxdiv').html('');
                $('#fancyboxdiv').empty();
            }
        });
        $('#fbLink2').fancybox({
            beforeShow: function () {
                $('#fancyboxdiv').html('<h1>Fancybox second</h1>');
                $('#fancyboxdiv').append('<a onclick="javascript:$(\'#fbLink1\').click();" href="javascript:;" title="fancybox 1">Fancybox first</a>');
            },
            afterClose: function () {
                // $('#fancyboxdiv').html('');
                $('#fancyboxdiv').empty();
            }
        });
    }); // ready
})(jQuery);

それはどのブラウザでも動作するはずです（IE7でテスト済み）

于 2013-03-22T22:41:17.080 に答える