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

Question

I am trying to set var for my slideshow using a class .selected, but it doesn't work. I am assuming that I have a problem with syntax, but funny enough, I have spent about 2 hours trying to find the correct way of doing it, and didn't find anything relevant! So, is it even possible (and if it is, how do I do it?) to have something like:

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

My particular code is: var currentIndex = $(.room_exp .selected).attr('title').split('')[3]

is it supposed to work?

Basically, I have a list of thumbnails (sort of), upon clicking which, I require a more detailed version to open at the correct slide. I believe I can access the number in the title of the thumbnail and use .split. Please help!)

CODE BELOW:

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

and the javascript I'm using: $(".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)
$(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'));


});

So, upon clicking the room_list, a corresponding room_exp opens, with side navigation buttons next and previous. The problem is that a)the title doesn't show up upon choosing a room, only after next or previous is clicked and b) the currentIndex set at 0, so after next or previous is hit - the slide goes to either the second or the last one, respectively (so, say I opened 6th expanded slide and pressed next, it goes to 2nd instead of 7th.) Hope, it's clear now)) Any ideas?

Here's a fiddle: https://jsfiddle.net/ekh20dxz/2/

var = ... is invalid syntax. However, please post the relevant code and explain the issue you are facing, right now for me your question is very uncleart — baao, Aug 01 '15 at 22:24
Sorry, my bad, of course. That's a misprint here, I do have a name in the actual code. — Tony, Aug 01 '15 at 22:25
`$('.div').attr('title')` will always return value of first matching element in page. Your split will return each character. Show relevant html and expected results. There is no definitive problem statement in your question — charlietfl, Aug 01 '15 at 22:26
Okay, sorry for being so unclear. I was trying to post a general form, not the exact code) P.S. edited the code — Tony, Aug 01 '15 at 22:29
Without all relevant code and expected results, question is not answerable — charlietfl, Aug 01 '15 at 22:42
The code is very long, that's the reason I didnt post it. What I was asking about, is whether it is possible to have a format of: var currentIndex = $(.room_exp .selected).data('number') and if it is the right syntax. I'll try to post the cod some time later then... — Tony, Aug 01 '15 at 22:59
No one has given an answer, but everyone feels obliged to -1 my post. Go on people, hating a learning newbie is the only thing available to you — Tony, Aug 05 '15 at 10:44

score 0 · Answer 1 · edited May 23 '17 at 12:06

Okay, great thanks to eugen sunic for the little push that got me thinking!

I have finially cracked all of the pieces, although, I might have some extra unecessary bits of code, duplicates etc, but the functionallity is just perfect!

What I have edited:

I moved one of the closing brackets for the cycleFunction () closing bracket to the end of .click functions, that is to make the variable global (at least for those 3 functions)
I changed the title writing function from: $('#room_name').text($('[style*="inline-block"].room_exp').attr('title'));

to:$('#room_name').text($('.room_exp:nth-child('+(adjIndex+2)+')').attr('title'));
Added a few changes regarding .addClass/.removeClass to the $('.room_details_close').click(function(){.

Now, openning any of the thumbnails shows the title immediately (the right title), clicking '<<' or '>>' changes the slide to next and previous, respectively, while the title changes accordingly. Closing the expanded menu and clicking on a different thumbnail results in re-writing the currentIndex (hence, adjIndex too), so the function starts again with no problem. Please feel free to use!

The new fiddle is: Fiddle

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

1 Answers1