Question

我是一个JavaScript新手！

我花了一整天来编写一个Javascript驱动的Slider！我不想使用Bootstrap Carousel。 Slider有4张图片，每张图片上面有一张文字。 Slider浏览图片和所属文本。所有这些图片都在class="rtype"的div中。在每个rtype divs中都有span的描述。 Spans没有id。

滑块工作得很好！没问题！

我想做什么：

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

因此，无论何时我点击下一个或上一个，都应该发生以下三件事：

更改图片（工作）
更改说明（工作）
从滑块中提取说明文字并将其显示在与滑块完全无关的td中（不工作）

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

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>

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代码中使用Tree Traversal取得了以下成功：

<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后代，然后设置文本。

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>

谢谢你戴夫！它现在正在运作！

从捕获在对象中的子元素中获取文本

2 个答案: