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

您可以考虑切换/案例陈述

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

如何简化Javascript If / Then Multiples？

3 个答案: