Question

我正在尝试使用类.selected为我的幻灯片设置var，但它不起作用。我假设我的语法有问题，但很有趣，我花了大约2个小时试图找到正确的方法，并没有找到任何相关的东西！那么，是否有可能（如果是的话，我该怎么做？）有类似的东西：

var name = $('.div').attr('title').split('')[3]

我的特定代码是： var currentIndex = $（。room_exp .selected）.attr（＆＃39; title＆＃39;）。split（＆＃39;＆＃39;）[3]

它应该有用吗？

基本上，我有一个缩略图列表（有点），点击后，我需要更详细的版本才能在正确的幻灯片上打开。我相信我可以访问缩略图标题中的数字并使用.split。请帮忙！）

以下代码：

<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>  
etc.

<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>
etc.

和我使用的javascript： $（＆＃34; .room_mdts＆＃34）点击（函数（事件）{。 //得到目标 var target = event.currentTarget; var room = $（target）.data（＆＃34; room＆＃34;）;

//First way, by reuse target (only inside this function)
$(target).addClass(room);

//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'));


});

因此，点击room_list后，会打开相应的room_exp，旁边有一个侧面导航按钮。问题是a）标题在选择房间时没有显示，只有在点击下一个或上一个之后b）currentIndex设置为0，所以在下一个或上一个被击中之后 - 幻灯片转到分别是第二个或最后一个（所以，假设我打开了第6张展开的幻灯片，然后按下它，它会转到第2张而不是第7张。）希望，它现在已经很清楚））有什么想法吗？

这是一个小提琴：https://jsfiddle.net/ekh20dxz/2/

Answer 1

好的，非常感谢 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(){的一些更改。

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

新的小提琴是：Fiddle

var = $（＆＃39; .div＆＃39;）。attr（＆＃39; title＆＃39;）。split（＆＃39;＆＃39;）[number]

1 个答案: