jquery function to access hidden divs

Question

The code below is the general template for my music page.

The slideshow moves the song/image gallery forward or back sequentially, but alas, the ' switchFeature ' function, which should allow you to jump to various tunes listed in the sidebar, doesn't seem to be working.

Can anyone point out where my error is, or what needs to be done to make it work? Thanks!

<!-- music.php -->

<?php require 'header.php' ?>

    <script type="text/javascript">

    $(document).ready(function() {

        $(".tuneslides").hide();
        var idName = ["#tune1", "#tune2"];
        var indexNum = 0;
        $(idName[0]).fadeIn(1000);

        $("#slidenext").click(function() {
            $(idName[indexNum]).fadeOut(300, function() {
                indexNum++; 
                if (indexNum > 1) {indexNum = 0;}
                $(idName[indexNum]).fadeIn(500);
            });
        });

        $("#slideback").click(function() {
            $(idName[indexNum]).fadeOut(300, function() {
                if (indexNum == 0) {indexNum = 1;}
                else {indexNum--;}  
                $(idName[indexNum]).fadeIn(500);
            });
        });

        // alas...
        function switchFeature (newIndexNum) {
            $(idName[indexNum]).fadeOut(300, function() {
                $(idName[newIndexNum]).fadeIn(500);
                indexNum = newIndexNum;
            });
        };

    });

    </script>


<div id="sidebar">

<h2>Featured Tunes<br>(click to show)</h2>

<p onclick="switchFeature(0)">Tune 1</p>
<p onclick="switchFeature(1)">Tune 2</p>

</div><!--sidebar-->    

<div id="main">

<div id="slideshow">

    <div id="slideback">Previous</div>
    <div id="slidenext">Next</div>

    <div class="tuneslides" id="tune1">
        <p class="tsTitles">Tune 1 </p>
        <audio controls>
            <source src="music/tune1.mp3" type="audio/mpeg">
            <img src="images/image1.jpg"/>
        </audio>
    </div>

    <div class="tuneslides" id="tune2">
        <p class="tsTitles">Tune 2</p>
        <audio controls>
            <source src="music/tune2.mp3" type="audio/mpeg">
            <img src="images/image2.jpg"/>
        </audio>
    </div>

</div> <!-- slideshow -->

</div><!--main-->

<?php require 'footer.php' ?>

Answer 1

You defined switchFeature within the scope of the

$(document).ready(function(){
});

Meaning switchFeature is in a different scope as the onclick event is trying to call.

Try to define your function like the following, and see if that works:

window.switchFeature = function(newIndexNum) {
   $(idName[indexNum]).fadeOut(300, function() {
      $(idName[newIndexNum]).fadeIn(500);
      indexNum = newIndexNum;
   });
 };

Answer 2

I would rewrite it a little so you don't have to do onclicks and you can keep everything together. Change the onclicks to use a class and html5 data:

<p class="tune" data-player="0">Tune 1</p>
<p class="tune" data-player="1">Tune 2</p>

Then convert that function switchFeature to a click for the tune class:

$('.tune').click(function() {
  var newIndexNum = $(this).attr('data-player');  
  $(idName[indexNum]).fadeOut(300, function() {
    $(idName[newIndexNum]).fadeIn(500);
    indexNum = newIndexNum;
  });
});

Codepen: http://codepen.io/maxwbailey/pen/iKxCo