jQuery click（）each（）是否唯一？

Question

我想要有多個span.play，沒有可點擊的ID並播放一些音頻文件。

問題：顯示屏上只有當前文件$持續時間（本）

$('.play').each(function() { 

    $(this).append('<span class="playIcon"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/76/Fairytale_player_play.png/14px-Fairytale_player_play.png"></span><span class="playDur"></span>'); 


    $(this).click(function() { 
     var file = this.firstChild; 
     if (file.paused != false) { 
      //+ stop all others before playing new one 
      file.play(); 
     } else { 
      file.pause(); 
     } 
     file.addEventListener("timeupdate", function() { 
      var len = file.duration, 
       ct = file.currentTime, 
       s = parseInt(ct % 60), 
       m = parseInt((ct/60) % 60); 
      if (s < 10) { 
       s = '0' + s; 
      } 
      $(".playDur").html('&nbsp;(' + m + ':' + s + ')'); 
      if (ct == len) { 
       $(".playDur").html(''); 
      } 
     }, false); 
    }); 

}); 

測試：

http://jsfiddle.net/sQPPP/

http://jsfiddle.net/sQPPP/1/ - 使用$(this).children(".foo")

Answer 1

您需要保存.play的jQuery對象在一個變量中，如this在內的變化回調。

http://jsfiddle.net/sQPPP/2/

$('.play').each(function(index) { 
    var $play = $(this); 
    $play.append('<span class="playIcon"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/76/Fairytale_player_play.png/14px-Fairytale_player_play.png"></span><span class="playDur"></span>'); 


    $play.click(function() { 
     var file = this.firstChild; 
     if (file.paused != false) { 
      //+ stop all others before playing new one 
      file.play(); 
     } else { 
      file.pause(); 
     } 
     file.addEventListener("timeupdate", function() { 
      var len = file.duration, 
       ct = file.currentTime, 
       s = parseInt(ct % 60), 
       m = parseInt((ct/60) % 60); 
      if (s < 10) { 
       s = '0' + s; 
      } 
      $play.children(".playDur").html('&nbsp;(' + m + ':' + s + ')'); 
      if (ct == len) { 
       $play.children(".playDur").html(''); 
      } 
     }, false); 
    }); 

});​