使用jquery隐藏和显示多个div

Question

我想要一个像这样的Mp3播放器。我的搜索脚本显示每页10个结果。我想为每个搜索结果项插入一个mp3。

>

当我点击播放时，播放器正常打开，当我点击停止时，播放器正常停止，但是当我点击播放并在另一个结果上点击播放时，第一个没有停止，第二个打开正常...

当我点击“播放”时，我需要自动播放mp3；当我点击“停止”时，玩家必须停止。

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

小提琴。

Answer 1

我一直在尝试一些事情。请检查这是否是你想要的：小提琴

$(".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();
    });
});