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