javascript - 当用户在不同的电台/专辑上点击播放时，我想改变封面图片

Question

我有大约 24 张带有悬停显示电台信息和播放按钮的大型封面图片。当用户点击播放按钮时，“播放器”会更改信息以匹配用户点击的内容。

目前我在“播放器”中有一个较小的封面图像，它不会更改以匹配较大的版本。

我希望播放器中的小封面图片也像电台名称和电台信息一样在用户单击播放时发生变化，以便它们与较大的图片匹配

这是我目前的脚本。我还没有在脚本中更改封面图像，因为这就是我试图弄清楚如何链接小图像的原因，因为目前我只有一个，它在 css 中有链接，我还有大约 23 个

$(function(){
var station = $('.player-station'),
    record = $('.record2:first'),
    playBtns = $('.play'),
    info = $('.nprecinfo');

playBtns.click(function()
{
    var btn = $(this);
    if(btn.text() == 'STOP')
    {
        btn.text('PLAY');
        record.css({'-webkit-animation-play-state': 'paused',
                    '-moz-animation-play-state': 'paused'});
        return;
    }

    playBtns.text('PLAY');
    var album = btn.closest('.album');
    station.text(album.find('h3').text());
    info.text(album.find('.recordinfo').text());
    record.css({'-webkit-animation-play-state': 'running',
                '-moz-animation-play-state': 'running'});
    btn.text('STOP');
});
});

这是带有小封面图片的 html 代码。它出现在 < div id="lrvinyl">

里面

<div id="player">
            <div id="recordbox">
            <div class="record2">
            </div>
            </div>
            <div class="player-box">
            <div id="title-player">Now playing:</div><br><strong><span class="player-station">Groove Salad</span></strong>
 <p class="nprecinfo">A nicely chilled plate of ambient/downtempo beats and grooves.</p>
</div>
<div class="bars-box">
<div class="bars">
<div class="bar-1"></div>
<div class="bar-2"></div>
<div class="bar-3"></div>
<div class="bar-4"></div>
<div class="bar-5"></div>
<div class="bar-6"></div>
<div class="bar-7"></div>
<div class="bar-8"></div>
<div class="bar-9"></div>
<div class="bar-10"></div>
                    </div>
<div id="lrvinyl">
                    </div>
                </div>
              </div>
            </div>
<div class="grid_3">
    <div class="album">
    <div class="record">
    </div>

这是 fiddle http://jsfiddle.net/7txt3/15/

Answer 1

将 rel="path_to_album_image" 添加到每个播放按钮。 然后添加脚本:

$('#lrvinyl').css("background-image","url("+btn.attr('rel')+")");

因此，当您按下播放按钮时，小图像会更改为播放按钮 rel="" 属性中定义的图像。 Demo