Question

我正试图写一个if，否则if条件，运气好。经过一段时间的努力，我有一些工作但功能不全。简单的脚本来改变简单图像库的div样式。我有第一和第三个div工作但第二个没有出现。我似乎理解这个概念，但反过来并怀疑问题是否在其他部分代码中。我不是在寻找有人为我做这件事，而是要解释我在哪些方面做出改变。这是我到目前为止所做的工作，但正如我所说的那样。任何想法或更好的解释将是最受欢迎的。

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

Answer 1

第二个没有出现

那是因为你的代码永远不会进入显示它的块。您的条件是隐藏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';
}

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

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

Answer 3

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

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

}

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

条件语句，如果是，否则

3 个答案: