如何减少这个脚本
How to reduce this script?
我想在这个脚本中使用循环,但我不知道如何做到这一点。
我试过了:
$('#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(){
$('[id^="topic"]').hide();
var topic = $('#choice').val();
if (topic!='') {
$('#topic'+topic).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)
那么,你可以在循环中使用"i"变量
试试这个:
$('#choice').change(function(){
for( var i = 0; i<8; i++) {
if($('#choice').val() <= i) {
$('#topic' + i).show();
} else {
$('#topic' + i).hide();
}
}
}
看起来可以这样做:
$('#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
的值(显示或隐藏)确定要使用的方法。对于所有i
(在循环内)小于#choice
的#topic[i]
,方法是show
,对于其他#topic[i]
,方法是hide
。接下来,使用括号符号执行确定的方法。
相关文章:
- 当包含另一个asp文件时,是否也包含所有引用的样式和脚本页面
- 借助asp.net验证或java脚本对多个文本进行验证
- chrome扩展:尽管运行了at:documentidle,js脚本还是过早启动
- Java脚本时间添加
- 不显示带有本地json文件数据的谷歌地图脚本
- JQuery添加元素需要在我的js之前再次添加JQuery脚本
- 从远程脚本获取用户IP
- 如何根据时间运行不同的脚本
- 如何将字符串值从php页面发送到java脚本页面
- 使用谷歌应用程序脚本将服务器端数据表返回到客户端
- 可以设置“;文件名"发生错误时显示的内联脚本标记的
- 如何通过分配单个变量来减少此脚本中的链接数
- 动作脚本 2 计时器快速减少
- 组合脚本以减少HTTP请求--身体切换器的入侵
- webview android最大限度地减少Java脚本加载时间
- 如何减少加载时间的网页与大量的脚本
- 跨站点脚本:正在限制<并且>标记是减少跨站点脚本的有效方法
- chrome扩展-在使用内容脚本时减少加载时间的最佳方法
- 如何减少此脚本
- 如何减少这个脚本