Question

非常直截了当的问题：

我已经构建了一个滑块（动态数量的幻灯片），并带有用于扩展导航的侧边栏（#slidercontrols）。此导航侧边栏的每个孩子都应链接到他们自己的相应幻灯片。

我目前正在使用a very quick, simple setup，它只为每张幻灯片重复相同的代码并且工作正常，但我相信我们都会同意这是一个非常混乱的解决方案。不是很干。出于教育原因，我很好奇你们如何解决这个问题：）

你怎么能建立一个简单的循环来指导#slidernavigation child X滑动X？你需要某种我不熟悉的动态选择器......

小提琴：http://jsfiddle.net/qbahamutp/TsJCP/

Answer 1

一开始我建议您只使用一个选择器。那么如何识别索引呢？有很多种方法，但在这种情况下，一种方法是使用jQuery http://api.jquery.com/jQuery.data/

将数据存储到div元素

然后当您单击任何div时，您只需从保存的数据中获取索引并使用它。

如果您知道div总是按索引顺序排列，那么您也可以使用.index（）。 .index（）http://jsfiddle.net/TsJCP/1/

的示例

Answer 2

我会这样做：

http://jsfiddle.net/9Quk7/5/

使用带有$.each()的幻灯片编号将属性rel添加到滑块控件中，或者使用其他逻辑来执行此操作（例如在html中生成索引，例如从db获取它们）。您可以将它用作jQuery和CSS中的选择器。例如.article[rel="1"]{ color: red !important; }

生成的标记看起来像

<div class="article gotoslide-1 currentslide" rel="1">
                <h4>Past NedTrain bij jou?</h4>
                <p>Bekijk met welke functies en .</p>
</div>

并在onclick中使用$(this).attr('rel')来获取索引。

$(function(){
    $('#contentslider ul').anythingSlider({
        width            : 320,
        height            : 215,
        startStopped    : true,
        forwardText        :"&nbsp;",
        backText        :"&nbsp;",
        delay            : 6000,
        easing            : 'easeInOutExpo',
//                    buildArrows        : false,
        hasgTags        : false,
//                    appendControlsTo: "#slidercontrols",
        buildNavigation    : false
    });

    $("#slidercontrols .article").each(function(i){
        $(this).attr('rel',i+1);
    });
    // Slide navigation. 
    $("#slidercontrols .article").click(function(){
        $('#contentslider ul').anythingSlider($(this).attr('rel'), function(slider){ /* alert('Now on page ' + slider.currentPage); */ });
        $(".currentslide").removeClass("currentslide");
        $(this).addClass("currentslide");
        return false;
    });
});

如果您打算动态添加幻灯片，可能需要使用$("#slidercontrols .article").live('click',...);

外部jQuery滑块导航的动态选择器？

2 个答案: