jquery函數來訪問隱藏的divs

-1

下面的代碼是我的音樂頁面的一般模板。jquery函數來訪問隱藏的divs

幻燈片向前或向後移動的歌曲/圖片庫順序，但很可惜，在「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' ?>

來源

2013-08-19 Gregory Tippett

所發生的情況，應該是，你期望會發生什麼？ – tymeJV

你很明顯知道事件處理程序是如何工作的，爲什麼不使用它們並擺脫內聯js廢話。 – adeneo

幻燈片放映成功地淡化了音頻/圖像的點擊。「switchFeature」功能沒有做任何事情。點擊單詞時沒有任何反應。 –

您的

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

含義switchFeature是在不同的範圍，因爲onclick事件試圖調用範圍內定義switchFeature。

嘗試定義你的功能，如以下內容，看看是否能工程：

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

來源

2013-08-19 17:39:48 Hless

這有什麼不同？ – putvande

由於將函數附加到窗口將其放在與文檔就緒回調範圍不同的範圍內 – Hless

OP在回調中定義了函數，然後嘗試在onclick事件上調用該函數。 onclick事件適用於全球範圍。功能，他定義它的方式，不是全球性的。我在答案中定義它的方式是。 – Hless

我會改寫了一點，這樣你就不必做onclicks，你可以把一切都在一起。更改onclicks使用類和HTML5數據：

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

然後該功能switchFeature轉換爲點擊調類：

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

來源

2013-08-19 17:55:41

不錯，更像jQuery的aproach正是這個:) – Hless

很酷我會試試看。感謝您的改進！ –

問題：'date-player'屬性是什麼？我還沒有找到它的文件。你剛剛做出來了嗎？如果是的話，你能否給我一個關鍵詞命名，我可以用它來解釋它的工作原理？ –

jquery函數來訪問隱藏的divs

回答

相關問題