Question

我正在使用soundmanager2 jquery插件，我想为每个轨道显示不同的图像。但是它只显示每个轨道的相同图像。（track1.jpg）

html：

<div class="ui360"><a href="audio/track1.m4a" data-src="track1.jpg">Track 1</a></div>
<div class="ui360"><a href="audio/track2.m4a" data-src="track2.jpg">Track 2</a></div>
<img src="img/cover.jpg" id="track-img">

jquery代码：

$('.ui360 a').on('click', function(){ 
  $("#track-img").attr("src", $(".ui360 a").attr("data-src"));
});

Answer 1

尝试$(this), .data()：

$('.ui360 a').on('click', function(){ 
   $("#track-img").attr("src", $(this).data("src"));
});

在click元素中可用的锚点上绑定.ui360个事件，然后使用#track-img更改$(this).data("src")的src。哪个在选择器的上下文中运行。它会更改目标图像的src属性。

Answer 2

你要求第一个带有类ui360的div的图像，它总是为track1.jpg 尝试类似：

（未经过测试的代码）

 $('.ui360 a').on('click', function(item){ 
  $("#track-img").attr("src", item.attr("src"));
});

jQuery - soundmanager2为每个轨道显示不同的图像

2 个答案: