0

私はプログラミングのプロではありません。私はユーザーにさまざまなスライドショーをアクティブ化する選択肢を提供しようとしています。そのためには、選択したスライドショーをアクティブ化し、他のスライドショーを非アクティブ化する必要があります。今、私は4つのスライドショーを持っています。しかし、私も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 ステートメントの前にすべての要素を非表示にし、ケースに基づいて要素を表示することも検討できます。これにより、コードがさらに削減され、さらに簡素化されます。

あなたも使うことができます$('#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 に答える