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');
    }
});

我的小提琴：http://jsfiddle.net/2Bsm7/

Answer 1

试试这个，

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

DEMO

Answer 2

尝试：

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

Updated fiddle.

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

2 个答案:

DEMO