javascript - 从对象中的子元素中获取文本

Question

我是 JavaScript 新手!

我花了一整天的时间编写一个 Javascript 驱动的 slider !我不想使用 Bootstrap Carousel。 slider 有 4 张图片，每张图片上方都有一个文本。 slider 浏览图片和所属的文本。所有这些图片都在 class="rtype" 的 div 中。在每个 rtype div 中都有一个带有描述的 span。跨度没有 ID。

Slider 运行良好!没有问题!

我正在尝试做的事情:

我希望 Javascript (jQuery) 从该描述 (span) 中读取文本并将其显示在 td 中。 td 有一个 id="rt"

所以无论何时我点击下一个或上一个，都会发生 3 件事:

1. 更改图片(工作)
2. 更改说明(工作)
3. 从 slider 中提取描述文本并将其显示在与 slider 完全无关的 td 中(不起作用)

所有这些以及更多内容都在一个 html 文件中。截至目前，整个网站仅包含一个 html 文件。

HTML slider 代码:

<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(){
$(".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 代码中通过以下方式使用树遍历没有成功:

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

你们能帮帮我吗？

谢谢。

Answer 1

您可以在显示下一张幻灯片时通过稍微更改代码来找到幻灯片的说明:

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

那应该行得通。您的 span 不是 rb 类元素的子元素，因此您所拥有的将不起作用。此外，您不需要 . ，因为您正在搜索 span 元素，而不是类。

因为您已经找到了下一张幻灯片，您可以链接您的 jQuery 以找到 span 后代，然后设置文本。