如何获得上一个和下一个旋转木马幻灯片父母的ID值?(jQuery)

Question

我正在尝试编写脚本，将分配描述到旋转木马的"前"one_answers"下"链接。描述需要根据当前幻灯片的数值从carousel项目ID属性中读取(可以通过carousel API访问-参见JS代码的第一行-返回从1开始的carousel项目的数值)

HTML:

<div id="carousel-wrapper" class="content-promo carousel-wrapper>
  <div class='wrapper'>
    <div id='features' class=' ccm-block-styles'>
      <div id='slide-1' class='carousel-slide'>
         <!-- SOME CONTENT  -->
      </div>
    </div>
    <div id='lifestyle' class=' ccm-block-styles'>
      <div id='slide-2' class='carousel-slide'>
         <!-- SOME CONTENT  -->
      </div>
    </div>
    <div id='food-&-drink' class=' ccm-block-styles'>
      <div id='slide-3' class='carousel-slide'>
         <!-- SOME CONTENT  -->
      </div>
    </div>
  </div> <!-- End of .wrapper -->
</div> <!-- End of #carousel-wrapper -->

JS:

currentslide = $( ".carousel-wrapper" ).rcarousel( "getCurrentPage" );
prevslide = currentslide - 2; // as eq() counts from 0
prevslideidtext = $(".carousel-slide").eq( prevslide ).parent().attr( "id" );
nextslide = currentslide;
nextslideidtext = $(".carousel-slide").eq( nextslide ).parent().attr( "id" );

不幸的是，当nextslideidtext为undefined时，prevslideidtext不是返回前一个幻灯片父DIV的ID，而是返回当前幻灯片父DIV的ID。

结果示例(当第一张幻灯片是当前幻灯片时):

currentslide = 1
prevslide = -1
nextslide = 1
prevslideidtext = features
nextslideidtext = undefined

有六个div与carousel-slide类(只有3显示在上面的HTML代码)，但上面的JS脚本行为，因为只有一个。

我做错了什么?

我并不坚持使用eq();，它对我来说似乎是实现我需要的效果的清晰和简单的方法。

(我知道当eq()的索引超出范围时，eq()会创建新的空项，我将对其进行排序-最后一张幻灯片-稍后)

谢谢

Answer 1

我找到的解决方法:

// 1. Read and save old carousel navigation text (like "Prev" and "Next")
carouselprevoldtext = $('#ui-carousel-prev').children(".carousel-control-text").html();
carouselnextoldtext = $('#ui-carousel-next').children(".carousel-control-text").html();
// 2. How many slides?
maxslidenumber = $(".carousel-slide").length;
// 3. Create an array with all slides' IDs (in this particular case I use parent() as ID is assigned through CMS by user not hardcoded - and extra DIV is added by CMS)
slideidarray = {};
$(".carousel-slide").each(
    function(index){
    slideidarray[index] = $ ( this ).parent().attr('id');
}                      
);
// 4. Run the carousel
$( ".carousel-wrapper" ).rcarousel({ OPTIONS HERE });
// 5. Find current slide
currentslide = $( ".carousel-wrapper" ).rcarousel( "getCurrentPage" ); // starts from 1 not from 0
// 6. Find previous and next slides ID texts
// A. For first slide - previous slide is the last one
if (currentslide == 1) {
    prevslideidtext = slideidarray[maxslidenumber - 1];
    nextslideidtext = slideidarray[1];
}
else {
    prevslideidtext = slideidarray[currentslide - 2]; // as arrays count from 0
    nextslideidtext = slideidarray[currentslide];
    // B. For last slide - next slide is the first one
    if (currentslide == maxslidenumber) {
    nextslideidtext = slideidarray[0];
    }
}
// 7. Create new carousel navigation text
carouselprevupdhtml = "<span class='carousel-control-text'>" + carouselprevoldtext + ": </span><span class='carousel-control-title'>" + prevslideidtext + '</span>';
carouselnextupdhtml = "<span class='carousel-control-text'>" + carouselnextoldtext + ": </span><span class='carousel-control-title'>" + nextslideidtext + '</span>';
// 8. Assign it to carousel navigation
$('#ui-carousel-prev').html( carouselprevupdhtml );
$('#ui-carousel-next').html( carouselnextupdhtml );

当然，每次更换幻灯片时都需要重复步骤5到8。

Answer 2

你好，先让我帮你更好，你能做到以下几点吗:

1)。将示例代码放在JSFiddle或CodePen中。然后把链接贴在这里。http://jsfiddle.net/http://codepen.io/

只是一个提示，我建议您更改上面的类名或ID名。使用相同的ID和类并不是一个好的做法。

你有以下内容:

<div id="carousel-wrapper" class="content-promo carousel-wrapper>

---

更新:看来您需要关闭#carousel-wrapper元素的class属性的引号