当前位置：文江博客话题详情

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

发布于 2024-11-26 17:13:45 字数 474 浏览 1 评论 0原文

非常简单的问题：

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

我目前正在使用一个非常快速、简单的设置，它只需为每张幻灯片重复相同的代码，工作得很好，但我相信我们都会同意这是一个非常混乱的解决方案。不是很干。出于教育原因，我很好奇你们专业人士将如何解决这个问题:)

你们如何构建一个简单的循环来指导#slidernavigation子X到幻灯片X？你需要某种我不熟悉的动态选择器......

小提琴：http://jsfiddle。网/qbahamutp/TsJCP/

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

悍妇囚夫 2024-12-03 17:13:45

首先我建议您只使用一个选择器。那么如何识别索引呢？有很多方法，但在这种情况下，一种方法是使用 jQuery http:// 将数据存储到 div 元素。 api.jquery.com/jQuery.data/

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

如果您知道 div 始终按索引顺序排列，您也可以使用 .index() 。
.index() 示例 http://jsfiddle.net/TsJCP/1/

回复收藏 0 原文

清风挽心 2024-12-03 17:13:45

我会这样做：

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

将属性 rel 添加到滑块控制与幻灯片的编号 $.each() 或使用一些其他逻辑来完成它（例如在 html 中生成索引，例如从数据库获取它们）。您也可以将它用作 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        :" ",
        backText        :" ",
        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',...);

I would do this:

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

add attribute rel to the slider control with the number of the slide with $.each() or use some other logic to do it (like generate indexes in the html e.g. get them from a db). You can use it as a selector in jQuery and CSS aswell. e.g. .article[rel="1"]{ color: red !important; }

Generated markup will look like

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

and use $(this).attr('rel') in onclick to get the index.

$(function(){
    $('#contentslider ul').anythingSlider({
        width            : 320,
        height            : 215,
        startStopped    : true,
        forwardText        :" ",
        backText        :" ",
        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;
    });
});

You might want to use $("#slidercontrols .article").live('click',...); if you plan to dynamically add slides

回复收藏 0 原文

~没有更多了~