ImageSlider中的目标函数和动态变量值

时间：2015-08-05 11:13:39

标签： javascript jquery html dynamic slider

我又问了这个问题...... 我有缩略图，点击后我需要打开更详细的版本，下一个/上一个导航按钮。一般来说，它工作 - 当我点击缩略图5（例如） - 幻灯片5打开。但！当我点击下一个＆＃39; - 图像滑块计数开始，第二张幻灯片打开，就好像最初显示的那个指数为1.现在，由于扩展版本的打开是由＆＃39; target＆＃39;触发的，有没有办法使用目标动态定义图像计数器（CurrentIndex）？

html是：

<div id="rooms">   
<ul id="check-rooms">

  <li class="room_c"><div class="room_list" data-room="one"><img src="site-assets/photos/rooms1.jpg"><div class="room-description"><span class="label_bold">Эконом</span><br><span class="desc"> Две кровати</span></div><div class="room_box"><a href="/photos"><span class="camera_left"><img src="site-assets/camera_icon.png" style="height: 16px; width: auto; position: relative;"></span></a><span class="camera_right"><div class="room_mdts" data-room="one" title="Номер класса Эконом">Дополнительная информация</div></span></div></div></li> 
  <li class="room_c"><div class="room_list" data-room="two"><img src="site-assets/photos/rooms2.jpg"><div class="room-description"><span class="label_bold">Стандарт</span><br><span class="desc">Двойная кровать</span></div><div class="room_box"><a href="/photos"><span class="camera_left"><img src="site-assets/camera_icon.png" style="height: 16px; width: auto; position: relative;"></span></a><span class="camera_right"><div class="room_mdts" data-room="two" title="Номер класса Стандарт">Дополнительная информация</div></span></div></div></li>  
   <li class="room_c extra"><div class="room_list" data-room="three"><img src="site-assets/photos/rooms2.jpg"><div class="room-description"><span class="label_bold">Стандарт</span><br><span class="desc">Две кровати</span></div><div class="room_box"><a href="/photos"><span class="camera_left"><img src="site-assets/camera_icon.png" style="height: 16px; width: auto; position: relative;"></span></a><span class="camera_right"><div class="room_mdts" data-room="three" title="Номер класса Стандарт">Дополнительная информация</div></span></div></div></li>  
   <li class="room_c extra"><div class="room_list" data-room="four"><img src="room-category/attic/img1.jpg"><div class="room-description"><span class="label_bold">Эконом мансарда</span><br><span class="desc">Двойная кровать</span></div><div class="room_box"><a href="/photos"><span class="camera_left"><img src="site-assets/camera_icon.png" style="height: 16px; width: auto; position: relative;"></span></a><span class="camera_right"><div class="room_mdts" data-room="four" title="Номер класса Люкс">Дополнительная информация</div></span></div></div></li> 
   <li class="room_c extra"><div class="room_list" data-room="five"><img src="room-category/attic/img1.jpg"><div class="room-description"><span class="label_bold">Эконом мансарда</span><br><span class="desc">Две кровати</span></div><div class="room_box"><a href="/photos"><span class="camera_left"><img src="site-assets/camera_icon.png" style="height: 16px; width: auto; position: relative;"></span></a><span class="camera_right"><div class="room_mdts" data-room="five" title="Номер класса Люкс">Дополнительная информация</div></span></div></div></li> 
  <li class="room_c"><div class="room_list" data-room="six"><img src="site-assets/photos/rooms3.jpg"><div class="room-description"><span class="label_bold">Люкс</span><br><span class="desc">Двойная кровать </span></div><div class="room_box"><a href="/photos"><span class="camera_left"><img src="site-assets/camera_icon.png" style="height: 16px; width: auto; position: relative;"></span></a><span class="camera_right"><div class="room_mdts" data-room="six" title="Номер класса Люкс">Дополнительная информация</div></span></div></div></li> 
   <li class="room_c extra"><div class="room_list" data-room="seven"><img src="site-assets/photos/rooms3.jpg"><div class="room-description"><span class="label_bold">Люкс</span><br><span class="desc">Две кровати</span></div><div class="room_box"><a href="/photos"><span class="camera_left"><img src="site-assets/camera_icon.png" style="height: 16px; width: auto; position: relative;"></span></a><span class="camera_right"><div class="room_mdts" data-room="seven" title="Номер класса Люкс">Дополнительная информация</div></span></div></div></li> 
  <li class="room_c extra"><div class="room_list" data-room="eight"><img src="room-category/neweds/IMG_9441.JPG"><div class="room-description"><span class="label_bold">Люкс Свадебный</span><br><span class="desc">Двойная кровать</span></div><div class="room_box"><a href="/photos"><span class="camera_left"><img src="site-assets/camera_icon.png" style="height: 16px; width: auto; position: relative;"></span></a><span class="camera_right"><div class="room_mdts" data-room="eight" title="Номер класса Люкс Свадебный">Дополнительная информация</div></span></div></div></li> 
  <li class="room_c extra"><div class="room_list" data-room="nine"><img src="site-assets/photos/7.jpg"><div class="room-description"><span class="label_bold">Лакшери (Супер Люкс)</span><br><span class="desc">Двойная кровать</span></div><div class="room_box"><a href="/photos"><span class="camera_left"><img src="site-assets/camera_icon.png" style="height: 16px; width: auto; position: relative;"></span></a><span class="camera_right"><div class="room_mdts" data-room="nine" title="Номер класса Люкс Свадебный">Дополнительная информация</div></span></div></div></li> 

</ul>



</div>

 <div class="button open"><span>Больше номеров</span><span class="icon-plus"><img src="site-assets/icon-plus.png" style="height: 0.9em;"></span></div>
 <div class="button close"><span>Скрыть</span><span class="icon-minus"><img src="site-assets/icon-minus.png" style="height: 0.9em;"></span></div>



</div>


<div class="space2"> <div class="divider"> <div class="c-hr"><hr class="ie-fix"></div></div>

<div id="room_details_holder">
<div id="room_name_and_close"><button class="room_details_close">X</button>    </div>
<div class="room_details">
<div id="rooms_nav_bar"><button class="room_previous"><<</button>
<div class="room_name"><div id="room_name"></div></div>
<button class="room_next">>></button></div>

<div class="room_exp" title="Room Type 1" data-room="one" data-number="1">
  <div class="room_split_l"><div id="room1_photo"><img src="site-assets/photos/rooms1.jpg"></div> <div class="book"></div> </div>
  <div class="room_split_r"><div class="room_description"> </div>
</div>
</div>
<div class="room_exp" title="Room Type 2" data-room="two" data-number="2">
  <div class="room_split_l"><div id="room2_photo"><img src="site-assets/photos/rooms2.jpg"></div> <div class="book"></div> </div>
  <div class="room_split_r"><div class="room_description"> </div>
</div>
</div>
<div class="room_exp" title="Room Type 3" data-room="three" data-number="3">
  <div class="room_split_l"><div id="room3_photo"><img src="site-assets/photos/rooms3.jpg"></div> <div class="book"></div> </div>
  <div class="room_split_r"><div class="room_description"> </div>
</div>
</div>
<div class="room_exp" title="Room Type 4" data-room="four" data-number="4">
  <div class="room_split_l"><div id="room4_photo"><img src="room-category/attic/img1.jpg"></div> <div class="book"></div> </div>
  <div class="room_split_r"><div class="room_description"> </div>
</div>
</div>
<div class="room_exp" title="Room Type 5" data-room="five" data-number="5">
  <div class="room_split_l"><div id="room5_photo"><img src="room-category/neweds/IMG_9441.JPG"></div> <div class="book"></div> </div>
  <div class="room_split_r"><div class="room_description"> </div>
</div>
</div>
<div class="room_exp" title="Room Type 6" data-room="six" data-number="6">
  <div class="room_split_l"><div id="room6_photo"></div> <div class="book">    </div> </div>
  <div class="room_split_r"><div class="room_description"> </div>
</div>
</div>
<div class="room_exp" title="Room Type 7" data-room="seven" data-number="7">
  <div class="room_split_l"><div id="room5_photo"><img src="room-category/neweds/IMG_9441.JPG"></div> <div class="book"></div> </div>
  <div class="room_split_r"><div class="room_description"> </div>
</div>
</div>
<div class="room_exp" title="Room Type 8" data-room="eight" data-number="8">

                                                       

以下是完整的javascript：

$(".room_mdts").click(function(event){
//get the target 
var target = event.currentTarget;
var room = $(target).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,
 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() {
  currentIndex += 1;
  if (currentIndex > itemAmt - 1) {
    currentIndex = 0;
  }
  cycleItems();
});

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

$('.room_next').click(function(){
$('#room_name').text($('.room_exp:nth-child('+(currentIndex+1)+')').attr('title'));
});
$('.room_previous').click(function(){
$('#room_name').text($('.room_exp:nth-child('+(currentIndex-1)+')').attr('title'));
});
$('#room_name').text($('[style*="inline-block"].room_exp').attr('title'));


});

代码似乎很长，但充满了重复，我试图确保它足够了。那么，有没有一种写作方式

 var CurrentIndex = $(target).data("room")

（当然使用数据室中的数字，我已经尝试了，但没有用！）

FIDDLE：https://jsfiddle.net/ekh20dxz/2/

1 个答案:

答案 0 :(得分：0)

工作解决方案JSfiddle，请查看以下评论​​以获取详细信息

jsfiddle.net/4x48441L/24 /

相关问题
最新问题