如何编码我的javascript以使切换正常工作？
如何编码我的javascript以使切换正常工作？
提问于 2012-06-10 19:47:36
我有javascript代码来切换、隐藏和显示信息，并为文本的一个showMoreText部分工作，但希望为所有不同的链接选择16个不同的切换选项。其中包括“蒙大拿州冰川”下面的图片，为什么它很重要？它确实会切换，但我创建了另一个javascript页面(toggle2.js)，专门用于"Ice now covers.“链接，但它不会出现。
代码用于toggle.js中的第一个切换选项
window.onload = function(){
document.getElementById('toggle').onclick = showMore;
}
function showMore(){
var div = document.getElementById('showMoreText');
var display = div.style.display;
display == "none" ? div.style.display = "block" : div.style.display = "none";
}在toggle2.js中第二个切换选项的代码
window.onload = function(){
document.getElementById('toggle2').onclick = showMore;
}
function showMore(){
var div = document.getElementById('showMoreText2');
var display = div.style.display;
display == "none" ? div.style.display = "block" : div.style.display = "none";
}HTMLfortoggle1中的toggle1代码
<div id="showMoreText" style="display: none"> (missing paranthesis)HTMLfortoggle2中的toggle2代码
<div id="showMoreText" style="display: none"> (missing paranthesis)怎么啦？我想要能够切换到许多不同的开关(1-16)，但当我点击toggle1，并想点击切换2，它不会改变。是什么变量阻止我正常工作？
谢谢!
回答 3
Stack Overflow用户
发布于 2012-06-10 20:02:55
根据Aleks G的答案进一步优化：
你的剧本：
window.onload = function(){
for(var i=0; i<3; i++){ //here is set to 3
document.getElementById('toggle'+i).onclick = function(i){
return function(){
showMore('showMoreText'+i);
}
}(i);
}
}
function showMore(id){
var div = document.getElementById(id),
display = div.style.display;
display == "none" ? div.style.display = "block" : div.style.display = "none";
}HTML：
<div id="toggle1" class="toggle"></div>
<div id="toggle2" class="toggle"></div>
<div id="toggle3" class="toggle"></div>CSS：
div.toggle{
display: none;
}实际上，您甚至不需要id in div。您只需循环遍历类toggle并找到所有的div。
Stack Overflow用户
发布于 2012-06-10 19:54:13
你为什么要把所有的开关分开？为什么不直接这么做呢？
window.onload = function(){
document.getElementById('toggle').onclick = showMore1;
document.getElementById('toggle2').onclick = showMore2;
document.getElementById('toggle3').onclick = showMore3;
...
}
function showMore1() { showMore('showMoreText'); }
function showMore2() { showMore('showMoreText2'); }
function showMore3() { showMore('showMoreText3'); }
...
function showMore(id){
var div = document.getElementById(id);
var display = div.style.display;
display == "none" ? div.style.display = "block" : div.style.display = "none";
}这是相当粗糙的，随时可以进一步优化。
Stack Overflow用户
发布于 2012-06-10 20:11:39
这并不是一个完整的答案，但为了满足上述要求，可以将window.onload函数简化为单个对象，并将代码重新命名。
window.onload = function() {
var tList={'toggle1': 'showMore1','toggle2': 'showMore2','toggle3': 'showMore3'};
for(var i in tList){document.getElementById(i).onclick = tList[i]};
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10971807
复制相关文章
相似问题
腾讯云开发者
