Question

以下代码是我的音乐页面的常规模板。

幻灯片顺序向前或向后移动歌曲/图像库，但唉，'switchFeature'功能，应该允许您跳转到侧边栏中列出的各种曲调，似乎不起作用

任何人都可以指出我的错误在哪里，或者需要做些什么才能让它发挥作用？谢谢！

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

您在

范围内定义了switchFeature

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

含义switchFeature与onclick事件试图调用的范围不同。

尝试定义您的函数，如下所示，看看是否有效：

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

Answer 2

我会稍微改写它，所以你不必做onclicks，你可以把所有东西放在一起。更改onclicks以使用类和html5数据：

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

然后将该函数switchFeature转换为tune类的单击：

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

jquery函数访问隐藏的div

2 个答案: