-1

我正在尝试写一个 if，else if 条件，运气好。在尝试了一段时间后，我有一些工作但没有完全发挥作用。用于更改简单图片库的 div 样式的简单脚本。我有第一个和第三个 div 工作，但第二个没有出现。我似乎理解这个概念，但反过来并怀疑问题出在代码的 else if 部分。我不是在找人为我做这件事，而是要解释我在哪里扭转事情。这是我到目前为止所做的工作，但正如我所说的，有些事情是相反的。任何想法或更好的解释将不胜感激。

function scroll()
{
    if (document.getElementById('thumbs1').style.visibility=='hidden' && document.getElementById('thumbs2').style.visibility=='visible' && document.getElementById('thumbs3').style.visibility=='visible' )
    {
      document.getElementById('thumbs1').style.visibility='visible';
      document.getElementById('thumbs2').style.visibility='hidden';
      document.getElementById('thumbs3').style.visibility='hidden';
    }
    else if (document.getElementById('thumbs2').style.visibility=='hidden' && document.getElementById('thumbs1').style.visibility=='visible' && document.getElementById('thumbs3').style.visibility=='visible' )
    {
     document.getElementById('thumbs1').style.visibility='hidden';
     document.getElementById('thumbs2').style.visibility='visible';
      document.getElementById('thumbs3').style.visibility='hidden';
    }
    else
    {
     document.getElementById('thumbs1').style.visibility='hidden' ;
     document.getElementById('thumbs2').style.visibility='visible' ;
     document.getElementById('thumbs3').style.visibility='visible';
    }
}
4

3 回答 3

4

第二个没有出现

那是因为您的代码永远不会进入显示它的块。您的条件thumbs2是隐藏而thumbs1可见thumbs3，这是在任何作业中都不明显的组合。好像您在某处混淆了 1 和 3。

更容易发现此类错误的提示：为style对象创建变量并重用它们，而不是每次都执行代码来访问它们。这不仅更快，而且使代码更短、更易读。或者更好的是，一个数组：

var styles = [];
for (var i=0; i<3; i++)
    styles[i] = document.getElementById("thumbs"+(i+1)).style;

if (styles[0].visibility=='hidden' && styles[1]=='visible' && styles[2].visibility=='visible') {
    styles[0].visibility='visible';
    styles[1].visibility='hidden';
    styles[2].visibility='hidden';
} else if (styles[0].visibility=='visible' && styles[1].visibility=='hidden' && styles[2].visibility=='visible') {
    styles[0].visibility='hidden';
    styles[1].visibility='visible';
    styles[2].visibility='hidden';
} else {
    styles[0].visibility='hidden' ;
    styles[1].visibility='visible' ;
    styles[2].visibility='visible';
}

如果您的模式更可预测（例如旋转可见性），那么现在也可以采用程序化方法。

于 2013-08-08T19:55:00.450 回答
2

很难说出您要做什么，但是如果您只想反转所有 3 个：

 function scroll()
{
    var t1 = document.getElementById('thumbs1'),
        t2 = document.getElementById('thumbs2'),
        t3 = document.getElementById('thumbs3');

       t1.visibility = t1.visibility === "hidden" ? "visible" : "hidden"
       t2.visibility = t2.visibility === "hidden" ? "visible" : "hidden"
       t2.visibility = t3.visibility === "hidden" ? "visible" : "hidden"
}

或更简洁地说

 function scroll()
{
    var thumbs = [document.getElementById('thumbs1'),
        document.getElementById('thumbs2'),
        document.getElementById('thumbs3')];

    for(var i=0; i<thumbs.length; i++) {
       thumbs[i].visibility = thumbs[i].visibility === "hidden" ? "visible" : "hidden";
    }
}
于 2013-08-08T19:52:44.873 回答
0

首先，感谢您的想法。我在这里发布的严肃想法中找到了很多理解，现在我开始看到使用数组的吸引力。答案简单明了，条件太多了。我使用了关于变量的想法并使用了逻辑方法。这是我想出的。

    function scroll()
{
var t1=document.getElementById('thumbs1'), 
       t2=document.getElementById('thumbs2'), 
       t3=document.getElementById('thumbs3');

if (t1.style.visibility=='visible'  )
{
  t2.style.visibility='visible';
  t1.style.visibility='hidden';
  t3.style.visibility='hidden';
}
else if (t2.style.visibility=='visible'  )
{
  t1.style.visibility='hidden';
  t3.style.visibility='visible';
  t2.style.visibility='hidden';
}
else
{
 t1.style.visibility= 'visible';
 t2.style.visibility='hidden' ;
 t3.style.visibility='hidden';
}

}

很简单吧？再次感谢。PS 会尽快发布解决方案，但必须等待 8 小时才能回答我自己的问题。

于 2013-08-09T11:08:29.657 回答