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

这应该已经成功了。

这是jsfiddle在左边的选项面板中选择（默认）选项'onLoad'时在“Frameworks＆amp; Extensions”下执行的操作。

如果您选择'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“toggle” 您应该为它们提供class“切换”并按类选择元素以分配onclick功能。

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

1 个答案: