Javascript 如何减少此脚本?

Javascript 如何减少此脚本?,javascript,jquery,Javascript,Jquery,我想在这个脚本中使用循环,但我不知道如何做 这就是我尝试过的: $('#choice').change(function(){ if ($('#choice').val()=='') { $('#topic1').hide(); $('#topic2').hide(); $('#topic3').hide(); $('#topic4').hide();

我想在这个脚本中使用循环,但我不知道如何做

这就是我尝试过的:

$('#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();
    });        
请帮帮我。

试试这个

$('#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的建议。

jquery可以使用如下选择器:

$('#choice' + i)
$('#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]();
  }
 });

然后,可以在循环中使用i变量

看起来可以这样做:

$('#choice' + i)
$('#choice').change(function(){
        $('[id^="topic"]').hide();
        var topic = $('#choice').val();
        if (topic!='') {
            $('#topic'+topic).show();
        };
});        
$('#choice').change();
$('#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]();
  }
 });
处理程序根据“显示”或“隐藏”选项的值确定要使用的方法。对于循环中的所有主题[i],其中i小于选择值,则显示方法;对于其他主题[i],则隐藏方法。接下来,使用执行确定的方法。

尝试以下操作:

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

基本开关箱或for回路将完成此工作。只需在JquerySet中完成这些,为所有元素创建一个类!这可能是最干净的方法,可能是==而不是@Hanky Panky:这样只会显示带有所选值的主题[i],而隐藏其余的主题。据我所知,OP试图用选项值KooiInc显示所有主题[I],请您解释一下您的代码好吗?谢谢dude@KooiInc是的,你是对的,对不起,我的错,我看得不够深。还有一件事,我想选择。有什么想法吗,伙计?好吧,这只会显示一个主题[i],而将所有主题[i]隐藏在我的位置!=$是的,你说得对。根据所述条件,这不应是可接受的答案。它不会隐藏所有的ID