如何简化Java If / Then Multiples？

Question

我不是编程专家。 我试图让用户选择激活不同的幻灯片，为此，我需要激活一个选定的幻灯片，然后停用其他幻灯片。 现在，我有四个幻灯片； 但我也可以有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';
        }

我尝试了一下，但是没有用……有人能给我一个提示我可以做什么吗？ 非常感谢！

Answer 1

尝试使用以下语法：

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();
    }

Answer 2

您可以考虑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语句之前隐藏所有元素，并根据大小写显示元素，这将进一步减少代码并进一步简化代码。

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

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

Answer 3

就像是 […]

是的，你知道了。 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';
}