javascript - Target function and dynamic variable values in ImageSlider -

i'm asking question yet time... have thumbnails, upon clicking need more detailed version open, next/previous navigation buttons. speaking, works - when click thumbnail 5 (for example) - slide 5 opens. but! when click 'next' - image slider count kicks in , second slide opens, if displayed 1 had index of 1. now, since openning of expanded version triggered 'target', there way dynamically define image counter (currentindex) using target?

and html is:

<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"> 

here's full javascript below:

$(".room_mdts").click(function(event){ //get target  var target = event.currenttarget; var room = $(target).data("room");  //first way, reuse target (only inside function) $('#room_details_holder').show(); //the second, using selectors   //remove "selected" classes have both "room" , "selected" classes   $('.room_exp.selected').removeclass("selected");   //add "selected" class current room (the selector can 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'));   }); 

the code seems long, full of repetitions, have tried make sure it's sufficient. so, there way of writing

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

(of course using numbers in data-room, have tried, didn't work!)

fiddle: https://jsfiddle.net/ekh20dxz/2/

working solution jsfiddle, check comments below details

jsfiddle.net/4x48441l/24/