0

我有 javascript 代码来切换隐藏和显示信息，并且适用于一个 showMoreText 文本部分，但想要所有不同链接的 16 个不同切换选项。包括适用于“蒙大拿州冰川”的图像，为什么它很重要？它确实可以切换，但我专门为“Ice now Covers...”链接创建了另一个 javascript 页面 (toggle2.js)，但它不会出现。在此处输入图像描述

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

用于切换 1 的 HTML 中的代码

<div id="showMoreText" style="display: none"> (missing paranthesis)

用于切换 2 的 HTML 中的代码

<div id="showMoreText" style="display: none"> (missing paranthesis)

怎么了？我希望能够切换到许多不同的切换 (1-16)，但是当我单击切换 1 并想要单击切换 2 时，它不会改变。什么变量阻止我正常工作？

谢谢！

4

3 回答 3

2

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

实际上，您甚至不需要idin div。您可以遍历该类toggle并找到所有divs。

于 2012-06-10T20:02:55.380 回答
0

为什么你需要单独拥有所有切换？为什么不这样做呢？

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

这很粗糙，请随时进一步优化。

于 2012-06-10T19:54:13.350 回答
0

不是一个完整的答案，但只是按照上面的方法，可以将 window.onload 函数简化为单个对象，并将代码重新循环。

window.onload = function() {
 var tList={'toggle1': 'showMore1','toggle2': 'showMore2','toggle3': 'showMore3'};
 for(var i in tList){document.getElementById(i).onclick = tList[i]};
}
于 2012-06-10T20:11:39.150 回答