如何在Flexslider显示一个特定的幻灯片，当有人点击使用jQuery的子导航项

How do i show a specific slide in Flexslider when someone clicked on sub nav item using jQuery?

本文关键字：导航 jQuery 幻灯片 显示 Flexslider 一个      更新时间：2023-09-26

我试图获得一个特定的Flexslider幻灯片显示当一个子菜单项被点击。

我已经为哪个滑块和哪个幻灯片添加了数据属性，我将用jQuery接收(至少这是我的计划):

<div id="main-nav" class="">
<ul>
    <li class="item1">
        <a href="#" class="scroll-link" data-id="Whatever">Whatever</a>
        <ul id="sub-nav1">
            <li><a href="#" data-slider="1" data-slide="0">Action</a></li>
            <li><a href="#" data-slider="1" data-slide="1">Another</a></li>
            <li><a href="#" data-slider="1" data-slide="2">Something</a></li>
        </ul>
    </li> 
    <li>
        <a href="#" class="scroll-link" data-id="whatever1">Whatever1</a>
        <ul id="sub-nav2">
            <li><a href="#" data-slider="2" data-slide="0">Action</a></li>
            <li><a href="#" data-slider="2" data-slide="1">Another</a></li>
            <li><a href="#" data-slider="2" data-slide="2">Something</a></li>
        </ul>
    </li>
    <li>
        <a href="#" class="scroll-link" data-id="whatever2">Whatever2</a>
        <ul id="sub-nav3">
            <li><a href="#" data-slider="3" data-slide="0">Action</a></li>
            <li><a href="#" data-slider="3" data-slide="1">Another</a></li>
            <li><a href="#" data-slider="3" data-slide="2">Something</a></li>
        </ul>
    </li>
</ul>

假设这是我的第一个flexislider:

<div class="flexslider" id="flexslider1">
    <ul class="slides">
        <li>
            <h3>Flexslider slide 1</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora provident velit quidem veniam temporibus, ipsa molestias rem dicta rerum et eveniet consequuntur nobis aliquid sed corporis exercitationem iusto impedit dolorem.</p>
        </li> 
        <li>
            <h3>Flexslider slide 2</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque natus vel aliquid omnis iusto ullam rerum commodi, quia ex illo libero odit laborum delectus sapiente pariatur sequi adipisci incidunt deleniti!</p>
        </li> 
        <li>
            <h3>Flexslider slide 3</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam, repudiandae qui vitae nesciunt culpa aperiam amet beatae laborum excepturi eos, quos ex illum distinctio quo. Fugiat ut ullam, sapiente sed.</p>
        </li>  
    </ul>
</div>

所有的flexslider都在header中初始化:

<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider();
  });
</script>

这是我的jQuery代码用来根据点击的子菜单项来操作滑块

$('#sub-nav li a').on('click', function(event) {
        event.preventDefault(event);
        var $sliderNo = $(this).attr('data-slider');
        var $slide = $(this).attr('data-slide');
        var $slider = "#flexslider" + $sliderNo;
        $($slider).flexslider($slide);
    });

我要做的是。

$('#sub-nav li a').on('click', function(event) {
    event.preventDefault(event);
    //Use data instead of attr
    var $sliderNo = $(this).data('slider');
    var $slider = "#flexslider" + $sliderNo;
    var $slide = $(this).data('slide');
    $($slider).flexslider($slide); // This won't run! - Why?
});
相关文章：