0

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

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

4

3 回答 3

0

尝试使用以下语法：-

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();
    }
于 2013-01-09T06:20:52.197 回答
0

你可以考虑 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();
}
于 2013-01-09T06:22:54.047 回答
0

就像是 […]

是的，你明白了。只有 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';
}
于 2013-01-09T06:28:46.487 回答