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

jquery toggle play/stop icon background

本文关键字：图标 背景 播放 jquery      更新时间：2023-12-05

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

<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/

尝试：

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

更新了fiddle

试试这个，

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

演示

相关文章：