我有这个
<div class="sc_menu">
<a href="#" m4v="/audio/01_Tribu.m4a" oga="/audio/01_Tribu.ogg" mp3="/audio/01_Tribu.mp3"><img src="/artistes/jean-luc_gergonne/jlgergonne_thumb.jpg" alt="/artistes/jean-luc_gergonne/jlgergonne.jpg"></a>
<a href="#" m4v="/artistes/diez/diez_demo.m4a" oga="/artistes/diez/diez_demo.ogg" mp3="/artistes/diez/diez_demo.mp3"><img src="/artistes/diez/diez_130x195.jpeg" alt="/artistes/diez/diez.jpeg"></a>
</div>
然后在同一页面上,我有:
<div class="zen">
<span class="player"></span>
<span class="circle"></span>
<span class="progress"></span>
<span class="buffer"></span>
<span class="drag"></span>
<div class="button">
<span class="icon play"></span>
<span class="icon pause"></span>
</div>
</div>
我的部分JavaScript如下:
this.sliderMenu = function() {
//and loads the jPlayer with the sound files for the Artist
$list.find('.sc_menu img').bind('click',function(){
var $this = $(this);
var music;
title = $this.text();
mp = $this.attr("mp3");
oga = $this.attr("oga");
m4a = $this.attr("m4a");
m4v = $this.attr("m4v");
ogv = $this.attr("ogv");
webmv = $this.attr("webmv");
poster = $this.attr("poster");
music = {
title: title,
mp: mp,
oga: oga,
}
console.log(music);
self.tsunamiPlayer(music);
//clicking on a thumb, replaces the large image
$('<img class="st_preview"/>').load(function(){
var $this = $(this);
var $currImage = $('#st_main').children('img:first');
$this.insertBefore($currImage);
// jPlayer
this.tsunamiPlayer = function(music) {
///init screen
var player = $(".zen .player");
var no_of_tracks = $(".sc_menu a").length;
player.jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
m4a: m4a,
mp3: mp,
oga: oga
});
},
swfPath: "/js/jplayer/Jplayer.swf",
supplied: "m4a, mp3, oga"
});
当我点击'a'链接img时,我想将属性加载到jPlayer实例中,但是当我在console.log(音乐)时我只得到一个未定义的
这样做的正确方法是什么?
答案 0 :(得分:0)
您的处理程序中的$(this)
变量引用了img
元素,而您的代码假装它是a
元素,因此要修复它,请替换以下行:
$list.find('.sc_menu img').bind('click',function(){
这个:
$list.find('.sc_menu a').bind('click',function(e){
e.preventDefault();