如何简化 Javascript If/The 倍数？答案

【问题标题】：How to simplify Javascript If/Then Multiples?如何简化 Javascript If/The 倍数？
【发布时间】：2013-01-09 06:15:16
【问题描述】：

我不是编程专家。我试图让用户选择激活不同的幻灯片，为此，我需要激活所选的一个，并停用其他的。现在，我有四个幻灯片；但我也可以有 20 个。而对于 20 人来说，这段代码看起来真的很难看：

        function setSlider(val)
        {
            if (val == 1)
            {
                $('#slider1').nivoSlider();
                document.getElementById('slider').style.visibility = 'hidden';
                document.getElementById('slider1').style.visibility = 'visible';
                document.getElementById('slider2').style.visibility = 'hidden';
                document.getElementById('slider3').style.visibility = 'hidden';
                document.getElementById('slider4').style.visibility = 'hidden';
            }
            if (val == 2)
            {
                $('#slider2').nivoSlider();
                document.getElementById('slider').style.visibility = 'hidden';
                document.getElementById('slider1').style.visibility = 'hidden';
                document.getElementById('slider2').style.visibility = 'visible';
                document.getElementById('slider3').style.visibility = 'hidden';
                document.getElementById('slider4').style.visibility = 'hidden';
            }
            if (val == 3)
            {
                $('#slider3').nivoSlider();
                document.getElementById('slider').style.visibility = 'hidden';
                document.getElementById('slider1').style.visibility = 'hidden';
                document.getElementById('slider2').style.visibility = 'hidden';
                document.getElementById('slider3').style.visibility = 'visible';
                document.getElementById('slider4').style.visibility = 'hidden';
            }
            if (val == 4)
            {
                $('#slider4').nivoSlider();
                document.getElementById('slider').style.visibility = 'hidden';
                document.getElementById('slider1').style.visibility = 'hidden';
                document.getElementById('slider2').style.visibility = 'hidden';
                document.getElementById('slider3').style.visibility = 'hidden';
                document.getElementById('slider4').style.visibility = 'visible';
            }
        }

我很确定还有更好的实现。类似的东西

        function setSlider(val)
        {
                $('#slider' . val).nivoSlider();
                //loop here from 1 to 20
                document.getElementById('slider' . val).style.visibility = 'hidden';
                // loop end
                document.getElementById('slider' . val).style.visibility = 'visible';
        }

我试过了，但它不起作用......谁能给我一个提示我能做什么？非常感谢！

【问题讨论】：

似乎是 iditis 的常见情况...使用类而不是增量 id 一切都会更容易。然后，您可以在循环中按索引定位元素。

标签： javascript slider nivo-slider

【解决方案1】：

类似 […]

是的，你明白了。只有 JavaScript 中的字符串连接运算符是加号，而不是点号。对于循环，使用简单的 for 语句：

function setSlider(val) {
     $('#slider' + val).nivoSlider();
     for (var i = 1; i <= 20; i++) {
          document.getElementById('slider' + i).style.visibility = 'hidden';
     }
     document.getElementById('slider' + val).style.visibility = 'visible';
}

【讨论】：

看起来是最优雅的解决方案。并且有效（几乎 100%）。试图稍微调整一下。非常感谢大家的帮助。非常感谢！

【解决方案2】：

试试下面的语法：-

function setSlider(val)
    {
            $("#slider").hide(); 
            $("#slider"+val).nivoSlider();
            //loop here from 1 to 20
            for(var i = 1;i<=20;i++){
              $("#slider"+i).hide();
            }
            // loop end
            $("#slider"+val).show();
    }

【讨论】：

【解决方案3】：

可以考虑switch/case语句

 function setSlider(val)
        {
                document.getElementById('slider').style.visibility = 'hidden';
                document.getElementById('slider1').style.visibility = 'hidden';
                document.getElementById('slider2').style.visibility = 'hidden';
                document.getElementById('slider3').style.visibility = 'hidden';
                document.getElementById('slider4').style.visibility = 'hidden';

switch(val){
case 1:
                $('#slider1').nivoSlider();
                document.getElementById('slider1').style.visibility = 'visible';
       break;

case2:          $('#slider2').nivoSlider();
                document.getElementById('slider2').style.visibility = 'visible';
       break;
etc,.

这将有助于简化。

你也可以考虑隐藏case语句之前的所有元素，并根据case显示元素，这将进一步减少你的代码并简化它。

你也可以使用$('#slider"+val).show();

 function setSlider(val)
            {
                    $('#slider').hide();
                    $('#slider1').hide();
                    $('#slider2').hide();
                    $('#slider3').hide();
                    $('#slider4').hide();
                    $('#slider'+val).show();
}

【讨论】：