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

试试这个我重新安排你的代码：使您的currentIndex全局并使用adjIndex进行分配。如果可以，我会改进我的答案：

如果单击右箭头，它会结束并返回到开头。

url：https://jsfiddle.net/eugensunic/80em4drd/3

代码：

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

Answer 2

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

我已经完成了所有部分的破解，但是，我可能会有一些额外的不必要的代码，重复等等，但功能完善是完美的！

我编辑的内容：

我将cycleFunction ()右括号的右括号之一移到.click函数的末尾，即将变量设为全局变量（至少为这3个函数）
我从更改了标题编写功能：$('#room_name').text($('[style*="inline-block"].room_exp').attr('title'));

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

向.addClass添加了关于.removeClass / $('.room_details_close').click(function(){的一些更改。

现在，打开任何缩略图会立即显示标题（右侧标题），点击“＆lt;＆lt;”或'＆gt;＆gt;'将标题分别更改为下一个和上一个，同时标题会相应更改。关闭展开的菜单并单击其他缩略图会导致重写currentIndex（因此，也会调整adjIndex），因此该函数将再次启动，没有任何问题。请随意使用！

新的小提琴是：Fiddle

JavaScript：图片滑块仅在点击

2 个答案: