Question

I am not a programming pro. I am trying to give the user a choice of activating different slideshows, and for that, I need to activate the one selected, and deactivate the others. Now, I have four slideshows; but I could have 20 too. And for the 20, this bit of code would really look ugly:

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

I am pretty sure there is something nicer to achieve. Something like

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

I tried it out, but it doesn’t work… Could anyone give me a hint what I could do? Thanks a lot!

Answer 1

Something like […]

Yeah, you’ve got it. Only the string concatenation operator in JavaScript is the plus, not the dot. For the loop, use a simple for-statement:

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