jquery if语句缩写与多个else if

时间:2014-12-16 17:56:39

标签: javascript jquery

我正在设立一个画廊,想知道是否有更有效或更短的设置方式。

除了主菜单部分之外,所有被换出的ID都被称为相同的ID。我主要是问,因为九岁不好,但如果我有200岁......那么你就明白了。

p.s代码工作正常,只是寻找一些缩短或优化的技巧。

提前致谢

$("#next_salud").on('click', function() {
if($('#Salud_inner01').is(':visible')) {
$("#Salud_inner01").fadeOut(1);
$("#Salud_inner02").fadeIn(600);
}

else if($('#Salud_inner02').is(':visible')){
$("#Salud_inner02").fadeOut(1);
$("#Salud_inner03").fadeIn(600);
}

else if($('#Salud_inner03').is(':visible')){
$("#Salud_inner03").fadeOut(1);
$("#Salud_inner04").fadeIn(600);
}

else if($('#Salud_inner04').is(':visible')){
$("#Salud_inner04").fadeOut(1);
$("#Salud_inner05").fadeIn(600);
}

else if($('#Salud_inner05').is(':visible')){
$("#Salud_inner05").fadeOut(1);
$("#Salud_inner06").fadeIn(600);
}

else if($('#Salud_inner06').is(':visible')){
$("#Salud_inner06").fadeOut(1);
$("#Salud_inner07").fadeIn(600);
}

else if($('#Salud_inner07').is(':visible')){
$("#Salud_inner07").fadeOut(1);
$("#Salud_inner08").fadeIn(600);
}

else if($('#Salud_inner08').is(':visible')){
$("#Salud_inner08").fadeOut(1);
$("#Salud_inner09").fadeIn(600);
}

else if($('#Salud_inner09').is(':visible')){
$(".salud_cont_remove").fadeOut(1);
$("#prev_salud,#next_salud").fadeOut(1);
$("#salud_menu_holder").fadeIn(600);
}

});

1 个答案:

答案 0 :(得分:2)

我建议将#Salud_inner01的公共类(SaludClass)改为#Salud_inner09并使用以下内容。

<div class="SaludClass" id="Salud_inner01" idx="01"></div>
<div class="SaludClass" id="Salud_inner02" idx="02"></div>
....
....
<div class="SaludClass" id="Salud_inner09" idx="09"></div>


$("#next_salud").on('click', function() {
   if($('.SaludClass').is(':visible')) {
       var idx = $(this).attr(idx);
       $("#Salud_inner"+idx).fadeOut(1);
       $("#Salud_inner"+(idx+1)).fadeIn(600);
    }
}