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

Question

I'm trying to get a specific Flexslider Slide to show when a sub-menu-item is clicked.

I have added data-attributes for which slider and which slide that should be active which i will receive with jQuery (at least that was my plan):

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

Let's say this is my first 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>

All of the Flexsliders are initiated in the head:

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

And this is my jQuery code for trying to manipulate the sliders based on which sub-menu-item they've clicked on:

$('#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

What i had to do was.

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