Как использовать переменную для HTML-элемента в JQuery?

Question

Следующий код является частью .js-файла jQuery (который используется в ползунке изображения с увеличенным размером):

if (vars.current_slide == 0) {
 $("#captions").children().css("display", "none");
    $("#caption0").css("display","inherit").css("visibility","visible");
    } 
if (vars.current_slide == 1) {
 $("#captions").children().css("display", "none");
    $("#caption1").css("display","inherit").css("visibility","visible");
    } 
if (vars.current_slide == 2) {
 $("#captions").children().css("display", "none");
    $("#caption2").css("display","inherit").css("visibility","visible");
    } 

Как видите, я попытался показать другую подпись (в диапазоне от #caption0 до #caption3) для каждого current_slide.

Как мне сократить это, чтобы заголовок для каждого current_slide назначался через переменную, в отличие от моего примера?

Answer 1

Селектор - это обычная строка, поэтому вы можете объединить переменную следующим образом:

$("#caption" + vars.current_slide)

Итак, в вашем случае код можно сократить до:

$("#captions").children().css("display", "none");
$("#caption" + vars.current_slide).css("display","inherit").css("visibility","visible");

Или еще короче:

$("#captions").children().hide();
$("#caption" + vars.current_slide).show();

Answer 2

Попробуйте:

$("#caption" + vars.current_slide)

Альтернативой может быть помещение элементов в массив и доступ к ним по индексу

Answer 3

Просто добавьте переменную в строку:

$('#captions').children().hide();
  $('#caption' + vars.current_slide).css({
    'display': 'inherit',
    'visibility': 'visible'
   });
}