使用jQuery向Elementor Pro旋转木马添加自定义字幕

Question

我刚开始用jQuery编程，在转换这段代码时遇到了问题，所以它不是硬编码的。

我正在使用Elementor Pro，我想根据自己的需要定制媒体转盘。我使用的JS是一种在旋转木马外设置字幕的变通方法。我使用这些按钮来切换多个div以显示标题。这里也是你的参考

<div class="caption caption1">
Hello 1
</div>
<div class="caption caption2">
Hello 2
</div>
<div class="caption caption3">
Hello 3
</div>
<div class="caption caption4">
Hello 4
</div>
<div class="caption caption5">
Hello 5
</div>

编辑：我更新的jQuery是这样的。由于字幕可以使用next of prev不断切换，有没有一种方法可以存储next的状态，以便在我按下上一个按钮时正确显示字幕？

jQuery(document).ready(function($) {
var state = 0;

function hideall() {
$('.caption').hide();
}
function reset(value) {
state = -1;
return state;
}
function updateCounter() {
state = state + 1;
}

hideall();
/*Stuck here with caption navigation*/ 
$(".next-update").click(function() {
state = state + 1;
if (state >= 1 && state <= 5) {
hideall();
$('.caption' + state).show();
} else {
reset(state);
}
});
$(".prev-update").click(function() {
state = state + 1;
if (state >= 5 && state <= 1) {
hideall();
$('.caption' + state).show();
} else {
reset(state);
}
});
});

Answer 1

$(".next-update").click(function() {
state = state + 1;
if (state >= 1 && state <= 5) {
hideall();
$('.caption' + state).show();
} else {
reset(state);
}
});