Question

我试图让特定的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>

让我们说这是我的第一个弹性滑板：

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

所有Flexsliders都是从头开始的：

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

Answer 1

我必须做的是。

$('#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?
});

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

1 个答案: