2

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

请注意，这最终仍会以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's 是独一无二的。而你给这两个段落都赋予了id“toggle”。
相反，您应该给他们class“切换”并按类选择元素以分配 onclick 功能。

于 2013-03-28T17:18:47.357 回答