首页 文章

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

提问于
浏览 次
2

我正在尝试编写脚本，将描述分配给轮播的“上一页”和“下一页”链接 . 需要根据当前幻灯片的数值（可通过轮播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 而不是返回上一张幻灯片父ID的ID，当 nextslideidtext 是 undefined 时，返回当前幻灯片父ID的ID .

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

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

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

我做错了什么？

我并不坚持使用 eq(); 它似乎在我看来是明确而简单的方法来实现我需要的效果 .

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

谢谢

jquery carousel

2 回答

  • 0

    嗨，首先让我更好地帮助你，你能做到以下几点：

    1.）将示例代码放在JSFiddle或CodePen中 . 然后将此链接发回此处 . http://jsfiddle.net/ http://codepen.io/

    只是提示我建议您更改上面的类名或ID名称 . 同时拥有ID和具有相同名称的类并不是一种好习惯 .

    你有以下几点：

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

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

    回复于
  • 0

    解决方法我找到了我的问题：

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

    回复于

相关问题