JavaScript：图像滑块在单击时仅更改一次

Question

我对 JavaScript 图像滑块的功能感到困惑，因为它在单击“下一步”时仅更改幻灯片一次（我还没有处理过上一个，但应该足够合乎逻辑，可以重新调整）。代码由以下给出：

$(".room_mdts").click(function(event){
//get the target 
var target = event.currentTarget;
var room = $(target).data("room");
currentIndex = parseInt($(target).attr('data-room'));


//First way, by reuse target (only inside this function)
$('#room_details_holder').show();
//The second, by using selectors

//remove all "selected" classes to all which have both "room" and "selected" classes
$('.room_exp.selected').removeClass("selected");
//add "selected" class to the current room (the selector can also be the target variable)
$('.room_exp[data-room='+room+']').addClass("selected");
});



var currentIndex = 0;

var adjIndex = currentIndex - 1,
 items = $('.room_details .room_exp'),
 itemAmt = items.length;



 function cycleItems() {
 var item = $('.room_details .room_exp').eq(currentIndex);
 items.hide();
 item.css('display','inline-block');
}


$('.room_next').click(function() {
 adjIndex += 1;
 if (adjIndex > itemAmt - 1) {
  adjIndex = 0;
 }
 cycleItems(adjIndex);
 cycleItems(currentIndex);
 $('#room_name').text($('.room_exp:nth-child('+(adjIndex+2)+')').attr('title'));
 });

$('.room_previous').click(function() {
 currentIndex -= 1;
 if (currentIndex < 0) {
  currentIndex = itemAmt - 1;
 }
 cycleItems(currentIndex);
 $('#room_name').text($('.room_exp:nth-child('+(currentIndex+1)+')').attr('title'));
 });



$('#room_name').text($('[style*="inline-block"].room_exp').attr('title'));


});

我必须引入 adjIndex 的原因是因为没有“-1”，幻灯片在第一次点击时改变了 2，再次，不知道为什么。

小提琴：https://jsfiddle.net/80em4drd/2/

有什么想法可以解决它只改变一次的问题吗？ （而且，#room_name 仅在单击后显示，展开时不显示）。

Answer 1

好的，非常感谢 eugen sunic 的小小的推动让我思考！

我终于破解了所有的部分，虽然，我可能有一些额外不必要的代码、重复的代码等，但功能非常完美！

我编辑过的内容：

1. 我将

   cycleFunction ()

   右括号的右括号之一移至

   .click

   函数的末尾，即使变量成为全局变量（至少对于这 3 个函数）

2. 我改变了标题书写功能from：

   $('#room_name').text($('[style*="inline-block"].room_exp').attr('title'));

   到：

   $('#room_name').text($('.room_exp:nth-child('+(adjIndex+2)+')').attr('title'));

3. 在

   .addClass

   中添加了一些关于

   .removeClass

   /

   $('.room_details_close').click(function(){

   的更改。

现在，打开任何缩略图都会立即显示标题（右侧标题），单击“<<' or '>>”将幻灯片分别更改为下一张和上一张，而标题也会相应更改。关闭展开的菜单并单击不同的缩略图会导致重写 currentIndex（因此，adjIndex 也是如此），因此该函数可以毫无问题地再次启动。 请放心使用！

新小提琴是：小提琴

Answer 2

试试这个我稍微重新排列了你的代码： 使您的 currentIndex 全局化并分配有 adjIndex。如果可以的话我会改进我的答案：

如果单击向右箭头，它将转到末尾并返回到开头。

网址：https://jsfiddle.net/eugensunic/80em4drd/3

代码：

 function cycleItems() {
    currentIndex = adjIndex;
    const item = $('.room_details .room_exp').eq(currentIndex);
    items.hide(); // Ensure all items are hidden
    item.css('display', 'inline-block'); // Show the selected item
}