jQuery if 语句缩写与多个 else if

jquery if statement abbreviation with multiple else if

本文关键字：if else 缩写 语句 jQuery      更新时间：2023-09-26

我正在建立一个画廊，想知道是否有更有效或更短的方法来设置它。

所有被换出的 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);
}
});

我建议为#Salud_inner01到#Salud_inner09提供一个公共类（SaludClass），并使用以下类。

<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);
    }
}
相关文章：