使用 jquery 多次隐藏和显示 div

Question

我想要一个 Mp3 播放器 like this one. 我的搜索脚本每页显示 10 个结果。我想为每个搜索结果项插入一个 mp3。

当我点击"play"时，播放器打开正常，当我点击"Stop"时，播放器正常停止，但是当我点击"Play"并点击"Play"另外一个结果，第一个不停，第二个正常打开

另外点击"play"时需要自动播放mp3；当我点击 "stop" 时，播放器必须停止。

<script>
$(function(){ // DOM READY shorthand

 $(".player").hide();

 $('.playertext').click(function( e ){
 var SH = this.SH^=1; // "Simple toggler"
 $(this).text(SH?'Stop':'Play')
       .css({backgroundPosition:'0 '+ (SH?-18:0) +'px'})
       .next(".player").slideToggle();
});

});

</script>

html:

 <div id="home">
<div  class="playertext">Play</div>

<div class="player">
   <audio controls>
     <source       src="http://media.easyuploadservice.com/telugu%20mp3/Mahankali%20(2011)/01%20-%20%20Keechaka%20Vadha.mp3" type="audio/mpeg"/>
   </audio>
 </div>

<div  class="playertext">Play</div>

 <div class="player">
    <audio controls>
      <source src="http://media.easyuploadservice.com/telugu%20mp3/Mahankali%20(2011)/03%20-%20%20Oo%20Lala.mp3" type="audio/mpeg"/>
   </audio>
 </div>

</div>

Fiddle.

Answer 1

我一直在尝试一些事情。请检查这是否是您想要的：fiddle

$(".player").hide();
$('.playertext').click(function (e) {
    var $player_div = $(this).next(".player"),
        $player = $("audio", $(this).next(".player"));

    $(".player").not($player_div).each(function (index, item) {
        var $player = $(this),
            $text = $player.prev(".playertext");
        $text.get(0).SH = 0;
        if ($player.is(":visible")) {
            $player.slideToggle(function () {
                $text.text('Play');
            });
        }
        $("audio", this).get(0).pause();
    });

    var SH = this.SH ^= 1; // "Simple toggler"
    $(this).text(SH ? 'Stop' : 'Play')
        .css({
        backgroundPosition: '0 ' + (SH ? -18 : 0) + 'px'
    })
        .next(".player").slideToggle(function () {
        $(this).is(":visible") ? $player.get(0).play() : $player.get(0).pause();
    });
});

使用 jquery 多次隐藏和显示 div

Multiple Hide and show div using jquery

jquery

mp3

audio-player