0

このスクリプトでループを使用したいのですが、その方法がわかりません。

これが私が試したことです：

$('#choice').change(function(){

        if ($('#choice').val()=='')

        {
             $('#topic1').hide();
             $('#topic2').hide();
             $('#topic3').hide();
             $('#topic4').hide();
             $('#topic5').hide();
             $('#topic6').hide();
             $('#topic7').hide();
        }if ($('#choice').val()=='1')
        {
             $('#topic1').show();
             $('#topic2').hide();
             $('#topic3').hide();
             $('#topic4').hide();
             $('#topic5').hide();
             $('#topic6').hide();
             $('#topic7').hide();
        }
        if ($('#choice').val()=='2')
        {
             $('#topic1').show();
             $('#topic2').show();
             $('#topic3').hide();
             $('#topic4').hide();
             $('#topic5').hide();
             $('#topic6').hide();
             $('#topic7').hide();
        }
        if ($('#choice').val()=='3')
        {
             $('#topic1').show();
             $('#topic2').show();
             $('#topic3').show();
             $('#topic4').hide();
             $('#topic5').hide();
             $('#topic6').hide();
             $('#topic7').hide();
        }
        if ($('#choice').val()=='4')
        {
             $('#topic1').show();
             $('#topic2').show();
             $('#topic3').show();
             $('#topic4').show();
             $('#topic5').hide();
             $('#topic6').hide();
             $('#topic7').hide();
        }
        if ($('#choice').val()=='5')
        {
             $('#topic1').show();

             $('#topic2').show();

             $('#topic3').show();

             $('#topic4').show();

             $('#topic5').show();

             $('#topic6').hide();

             $('#topic7').hide();
        }
        if ($('#choice').val()=='6')

        {
             $('#topic1').show();

             $('#topic2').show();

             $('#topic3').show();

             $('#topic4').show();

             $('#topic5').show();

             $('#topic6').show();

             $('#topic7').hide();
        }
          if ($('#choice').val()=='7')
        {
             $('#topic1').show();

             $('#topic2').show();

             $('#topic3').show();

             $('#topic4').show();

             $('#topic5').show();

             $('#topic6').show();

             $('#topic7').show();
        }                        
    });
    $('#choice').change();
    });

ここで私を助けてください。

4

5 に答える 5

5 
$('#choice').change(function(){
        $('[id^="topic"]').hide();
        var topic = $('#choice').val();
        if (topic!='') {
            $('#topic'+topic).show();
        };
});        
$('#choice').change();
于 2013-01-10T07:11:17.253 に答える
4

これを試して

$('#choice').change(function(){
var i;
for(i=1;i<8;i++)
{
  if(i==$(this).val())
  {
       $('#topic'+i).show();
  }
  else
  {
       $('#topic'+i).hide();
  }
}

});

$('#choice').change();

編集：MrCodeのアドバイスを改善しました。

于 2013-01-10T07:09:00.143 に答える
1

jqueryは次のようなセレクターを使用できます。

$('#choice' + i)

次に、ループで「i」変数を使用できます

于 2013-01-10T07:09:44.310 に答える
0

次のように実行できるようです。

$('#choice').on('change', function(){
  for(var i=1;i<8;i+=1)  {
    var showhide = i <= +$(this).val() ? 'show' : 'hide';
    //                  ^convert value to numeric
    $('#topic'+i)[showhide]();
  }
 });

#choiceハンドラーは、 （表示または非表示）の値に応じて、使用するメソッドを決定します。（ループ内の）すべての#topic[i]場合、メソッドの値は、です。その他の場合、メソッドはです。次に、角かっこ表記を使用して、決定されたメソッドが実行されます。i#choiceshow#topic[i]hide

于 2013-01-10T07:20:28.357 に答える
0

これを試して：

$('#choice').change(function(){
        for( var i = 0; i<8; i++) {
            if($('#choice').val() <= i) { 
                $('#topic' + i).show();
            } else {
                $('#topic' + i).hide();
            }
        }
    }
于 2013-01-10T07:34:21.047 に答える