-1

以下のコードは、私の音楽ページの一般的なテンプレートです。

スライドショーは曲/画像ギャラリーを順番に前後に移動しますが、残念ながら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' ?>
4

2 に答える 2

2

switchFeatureの範囲内で定義した

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

switchFeatureonclick イベントが呼び出そうとしているため、意味は別のスコープにあります。

次のように関数を定義してみて、それが機能するかどうかを確認してください。

window.switchFeature = function(newIndexNum) {
   $(idName[indexNum]).fadeOut(300, function() {
      $(idName[newIndexNum]).fadeIn(500);
      indexNum = newIndexNum;
   });
 };
于 2013-08-19T17:39:48.580 に答える
1

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

コードペン: http://codepen.io/maxwbailey/pen/iKxCo

于 2013-08-19T17:55:41.350 に答える