如何获取上一轮和下一轮播放幻灯片的父母的ID值？ （jQuery的）

Question

我正在尝试编写脚本，将描述分配给轮播的“上一页”和“下一页”链接。需要根据当前幻灯片的数值（可通过轮播API访问 - 参见JS代码的第一行 - 从1开始返回轮播项的数值）从旋转木马项ID属性中读取描述。

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

不幸的是，当prevslideidtext为nextslideidtext时，undefined而不是返回上一张幻灯片父ID的ID，会返回当前幻灯片父级的ID。

结果示例（当第一张幻灯片是当前幻灯片时）：

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

有六个DIV具有carousel-slide类（上面的HTML代码中只显示了3个），但上面的JS脚本表现得只有一个。

我做错了什么？

我并不坚持使用eq();我觉得在我看来，要达到我需要的效果是明确而简单的方法。

（我知道当传递给eq（）的索引超出范围时，eq（）会创建新的空项目，我会将其排序 - 最后一张幻灯片 - 稍后）

由于

Answer 1

首先，我首先帮助您，您可以做得更好：

1。）将示例代码放在JSFiddle或CodePen中。然后在这里发布该链接。 http://jsfiddle.net/ http://codepen.io/

我建议您更改上面的类名或ID名称。同时拥有ID和具有相同名称的类是不好的做法。

您有以下内容：

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

---

更新：您需要关闭#carousel-wrapper元素的class属性的引号。

Answer 2

解决方法我发现了我的问题：

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