オブジェクト内に閉じ込められた子要素からテキストを取得する

Question

私はJavaScriptが新参者です！

Javascriptで駆動されるスライダをコーディングするのに一日かかりました！私はBootstrap Carouselを使いたくなかった。スライダーには4枚の写真があり、各写真にはその写真の上にテキストがあります。スライダはピクチャと所属テキストをナビゲートします。これらの画像はすべてclass="rtype"とdivで表示されます。これらのrtype divsのそれぞれには、説明付きのspanがあります。スパンにはIDがありません。

スライダは完全に動作しています！そこに問題はありません！私はJavascript（jQueryの）その記述（span）のうち、テキストを読み、tdでそれを表示したい

：私は何をしようとしています

。私は3つの事が起こるはず、次または前のをクリックするたびtdだからid="rt"

があります

1. 変更ピクチャー（作業）
2. 変更の説明（作業）から
3. 抽出説明文スライダとは何も関係がありません（動作していない）tdに表示してください。

これ以上は単一のhtmlファイル内にあります。現時点では、ウェブサイト全体は1つのhtmlファイルのみで構成されています。

HTMLスライダーコード：

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

Javascriptのナビゲーションコード：

<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; 
}); 
}) 

：

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

私は次のように上記のJavascriptのコードのツリートラバーサルとは成功していません

あなたは私を助けてくれますか？

ありがとうございました。

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

動作するはずです：あなたは次のスライドを表示するとき

Answer 1

あなたは少しあなたのコードを変更することで、スライドの説明を見つけることができます。あなたのspanは、クラスrbの要素の子ではないので、あなたが持っているものは動作しません。また、span要素を検索しているため、クラスではないため、.はそこに入りません。

すでに次のスライドが見つかりましたので、jQueryをチェーンしてスパン子孫を見つけて、テキストを設定することができます。完全を期すために

Answer 2

：

これはスライダーナビゲーションコードは次のように見なければならない方法です。

<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(); 
var text = $('.rtype:eq(' + prev + ')').show().find("span").text(); 
$("#rt").text(text); 
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(); 
var text = $('.rtype:eq(' + next + ')').show().find("span").text(); 
$("#rt").text(text); 
return false; 
}); 
}) 
</script> 

はあなたにデイブありがとうございました！それは今働いている！