php - 代码在 jsfiddle 中有效，但当我将所有代码放入我的网站时不起作用

Question

我的目标是在我的 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 );
});

Answer 1

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

可能您的 onclick setter(jquery 代码)在文档加载之前运行(因此此时 document.body 中没有要设置的元素)。

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

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

这应该已经可以解决问题了。

这就是当您在左侧选项面板的“Frameworks & Extensions”下选择(默认)选项“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);
}

请注意，这最终仍然以 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 函数。