2

私の目標は、iframe (カレンダーを含む) の両側に、1 つの iframe でカレンダー #1 とカレンダー #2 を切り替えるボタンを配置することです。

助言がありますか？

|arrowLeft| |-----Iframe-------| |arrowRight|

コードはjsfiddleで機能しますが、すべてのコードをWebサイトに配置すると機能しません。

何故ですか？

HTML:

<p id="toggle">
<span> Left </span>
<span> </span>
</p>

<div id="left"> <iframe>LEFT CONTENT</iframe> L</div>
<div id="right"> <iframe>RIGHT CONTENT</iframe>R </div>

<p id="toggle">
<span></span>
<span> Right </span></p>

CSS:

#right { display:none; }

脚本：

$('#toggle > span').click(function() {
   var ix = $(this).index();

   $('#left').toggle( ix === 0 );
   $('#right').toggle( ix === 1 );
});
4

1 に答える 1

2

あなたはjqueryをロードしたと言うので..

おそらく、onclick セッター (jquery コード) は、ドキュメントが読み込まれる前に実行されます (そのため、その時点で document.body に要素はありません)。

jsfiddle ('No-Library' 純粋な JS) では、コードは (デフォルトで) 次のようにラップされます。

window.onload=function(){
// your code here
};

これでうまくいくはずです。

これは、「フレームワークと拡張機能」の下の左側のオプション パネルで (デフォルト) オプション「onLoad」を選択したときに jsfiddle が行うことです。

「onDomready」を選択すると、コードは（現在）次のように という関数にラップされますVanillaRunOnDomReady。

var VanillaRunOnDomReady = function() {
// your code here
}

var alreadyrunflag = 0;

if (document.addEventListener)
    document.addEventListener("DOMContentLoaded", function(){
        alreadyrunflag=1; 
        VanillaRunOnDomReady();
    }, false);
else if (document.all && !window.opera) {
    document.write('<script type="text/javascript" id="contentloadtag" defer="defer" src="javascript:void(0)"><\/script>');
    var contentloadtag = document.getElementById("contentloadtag")
    contentloadtag.onreadystatechange=function(){
        if (this.readyState=="complete"){
            alreadyrunflag=1;
            VanillaRunOnDomReady();
        }
    }
}

window.onload = function(){
  setTimeout("if (!alreadyrunflag){VanillaRunOnDomReady}", 0);
}

これは、最終的には「onLoad」オプションのようなものになる ことに注意してください。window.onload

ライブラリ JQuery 1.9.1 をロードすると、状況が (少し) 変わります。
オプション「onLoad」は、次のようにコードをラップします。 

$(window).load(function(){
// your code here
});

これは基本的に、この回答の最初のオプションと同じですが、JQuery の方法であることに注意してください。

オプション「onDomready」を選択した場合 (JQuery ライブラリが JSFiddle にロードされている間)、コードは次のようにラップされます。 

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


以下のコメントで ErikE が指摘したように、すでに JQuery を読み込んで使用しているため、さらに別の JQuery の方法を使用することもできます。

$(document).ready(function() { 
// your code here
});

最後に、ErikE があなたの質問に対するコメントで指摘したように (私が見落としていた深刻な問題)、idは一意であることを意図しています。両方の段落にID「トグル」を与えたのに対し。
代わりに、それらにclass「トグル」を与え、クラスごとに要素を選択して、onclick 関数を割り当てる必要があります。

于 2013-03-28T17:18:47.357 に答える