代码在jsfiddle中工作,但当我将所有代码放入我的网站时就不起作用了


Code works in jsfiddle but doesn't work when I put all the code into my website

我的目标是在我的iframe(它包含一个日历)的每一边都有一个按钮,它在一个iframe中在日历#1和日历#2之间来回切换。

有什么建议吗?

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

代码在jsfiddle中工作,但当我将所有代码放入我的网站时不起作用。

为什么?

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 );
});

既然你说你已经加载了jquery..

可能你的onclick setter (jquery代码)是在文档加载之前运行的(因此文档中没有元素)。

在jsfiddle ('No-Library'纯JS)中,代码(默认情况下)包装在:

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

应该已经有效果了。

这就是jsfiddle在左侧选项面板"Frameworks &"下选择(默认)选项"onLoad"时所做的事情。扩展"。

如果你选择'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);
}

注意,这个最终仍然结束在window.onload像'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 "toggle"。
相反,您应该给它们class"toggle",并按类选择元素以分配onclick功能。