javascript - jquery 切换播放/停止图标背景

Question

我有一些视频链接的无序列表，链接前面带有播放图标作为背景。当用户单击链接时，视频将在链接左侧的播放器上播放。当用户单击链接时，视频开始播放，背景图标变为“停止图标”。如果用户点击另一个链接，该链接现在应该有停止图标作为其背景，而前一个链接的背景应该恢复为播放图标，因为它当前没有播放。

<ul id="playlist">
        <li><a class="play" href="http://video-js.zencoder.com/oceans-clip.mp4" onclick="playClip(this.href); return false;">Oceans</a>
        </li>
        <li><a class="play" href="http://html5videoformatconverter.com/data/images/happyfit2.mp4" onclick="playClip(this.href); return false;">Happy Fit</a>
        </li>
        <li><a class="play" href="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" onclick="playClip(this.href); return false;">Sintel</a>
        </li>
</ul>

我的 CSS:

#playlist a.play{
    background-image: url('/_layouts/images/plplay1.gif');
    background-repeat: no-repeat;
    padding-left: 30px;  /* width of the image plus a little extra padding */
    display: block;  /* may not need this, but I've found I do */
}

#playlist a.stop{
    background-image: url('/_layouts/images/plstop1.gif');
    background-repeat: no-repeat;
    padding-left: 30px;  /* width of the image plus a little extra padding */
    display: block;  /* may not need this, but I've found I do */
}

还有我的 JS:

$('#playlist li a').click(function() {
    if ($(this).hasClass('play')) {
        $(this).removeClass('play').addClass('stop');
    } else if ($(this).hasClass('stop')) {
        $(this).removeClass('stop').addClass('play');
    } else {
        $(this).addClass('play');
    }
});

还有我的 fiddle :http://jsfiddle.net/2Bsm7/

Answer 1

尝试:

$('#playlist li a').click(function() {
        if (!($(this).hasClass('stop'))) {
            $('#playlist li a.stop').toggleClass('play stop');
        }
        $(this).toggleClass('play stop');
    }
);

Updated fiddle.