Zombievirus Zombievirus - 7 months ago 17
Javascript Question

Getting Text out of a child element trapped in an object

I am a JavaScript Newbie!

It took me the entire day to code a Javascript driven Slider! I didn't want to use the Bootstrap Carousel. The Slider has 4 pictures and each picture has a Text above that picture. The Slider navigates through the Pictures and the belonging Text. All these Pictures are in divs with

class="rtype"
. In each of these rtype
divs
there is a
span
with the description. The Spans have no id.

The Slider is working perfectly! No issues there!

What i am trying to do:

I want Javascript (jQuery) to read the text out of that description (
span
) and display it in a
td
. The
td
has an
id="rt"


So whenever i click on next or previous, 3 things should happen:


  1. Change Picture (working)

  2. Change Description (working)

  3. Extract Description text from the slider and display it in a
    td
    that has absolutely nothing to do with the slider (not working)



All of this and more is in a single html file. As of now the entire website consists of one html file only.

The HTML Slider Code:

<div id="minc" class="col-xs-6 col-sm-3">

<div class="rtype text-center" style="display: block;">
<a href=""><img class="lb img-responsive pull-left" src="img/l.png" alt=""/></a><span><strong>SINGLE ROOM</strong></span>
<a href=""><img class="rb img-responsive pull-right" src="img/r.png" alt=""/></a>
<img class="img-responsive" src="img/SR.jpg" alt=""/>
</div>

<div class="rtype text-center" style="display: none;">
<a href=""><img class="lb img-responsive pull-left" src="img/l.png" alt=""/></a><span><strong>DOUBLE ROOM</strong></span>
<a href=""><img class="rb img-responsive pull-right" src="img/r.png" alt=""/></a>
<img class="img-responsive" src="img/DR.jpg" alt=""/>
</div>

<div class="rtype text-center" style="display: none;">
<a href=""><img class="lb img-responsive pull-left" src="img/l.png" alt=""/></a><span><strong>TWIN ROOM</strong></span>
<a href=""><img class="rb img-responsive pull-right" src="img/r.png" alt=""/></a>
<img class="img-responsive" src="img/TR.jpg" alt=""/>
</div>

<div class="rtype text-center" style="display: none;">
<a href=""><img class="lb img-responsive pull-left" src="img/l.png" alt=""/></a><span><strong>FAMILY ROOM</strong></span>
<a href=""><img class="rb img-responsive pull-right" src="img/r.png" alt=""/></a>
<img class="img-responsive" src="img/FR.jpg" alt=""/>
</div>

</div>


The Javascript Navigation Code:

<script>

$(function(){
$(".lb").click(function () {
var no_slides = $('.rtype').length;
var parent = $(this).parent().parent();
var current = $('.rtype').index(parent);
var prev = no_slides - 1;
if (current > 0) {
prev = current - 1;
}
$('.rtype').hide();
$('.rtype:eq(' + prev + ')').show();
return false;
});
})



$(function(){
$(".rb").click(function () {
var no_slides = $('.rtype').length;
var parent = $(this).parent().parent();
var current = $('.rtype').index(parent);
var next = 0;
if (current < no_slides - 1) {
next = current + 1;
}

$('.rtype').hide();
$('.rtype:eq(' + next + ')').show();
return false;
});
})
</script>


I had no success with Tree Traversal in the above mentioned Javascript Code the following way:

<script>
$(function(){
$(".rb").click(function () {
var no_slides = $('.rtype').length;
var parent = $(this).parent().parent();
var current = $('.rtype').index(parent);

--> var text = $(this).children('.span').text(); <--
--> $( "#rt" ).text(text); <--

var next = 0;
if (current < no_slides - 1) {
next = current + 1;
}

$('.rtype').hide();
$('.rtype:eq(' + next + ')').show();
return false;
});
})


Can you guys please help me?

Thanks.

Answer

You can find the description of the slide by changing your code slightly when you show the next slide:

var text = $('.rtype:eq(' + next + ')').show().find("span").text();
$("#rt").text(text); 

That should work. Your spans are not children of the elements with class rb, so what you have won't work. Also, you don't want the . in there because you are searching for an span element, not a class.

Since you have already found the next slide, you can chain your jQuery to find the span descendant, then set the text.