Jquery - 他の人が開いているときにdivを自動的に閉じる

Question

他の人が開いているときに、自動閉鎖divは機能しません。ここでは、HTMLコードは、ある。ここ

<div class="item"> 
     <p>DJ Rizmo Ft. Omi & Kid Ink - Cheerleader (Remix)<br> 
     <button class="bt-play" onclick="openPlayer('N9l-tHPOEOw')"> Play </button></p> 
</div> 
<br><div id="playN9l-tHPOEOw"></div> 

<div class="item"> 
     <p>Cheerleader (remix) - By Omi feat Kid Ink<br> 
     <button class="bt-play" onclick="openPlayer('-w_AjZ_CQuM')"> Play </button></p> 
</div> 
<br><div id="play-w_AjZ_CQuM"></div> 

<div class="item"> 
     <p>Kid ink ft Omi Cheerleader Remix<br> 
     <button class="bt-play" onclick="openPlayer('aAS1VMvf3tc')"> Play </button></p> 
</div> 
<br><div id="playaAS1VMvf3tc"></div> 

はjqueryのコードを行く：それは他を閉じるだけ#divを表示されるように

function openPlayer(a) { 
    var b = '<iframe width="560" height="315" src="https://www.youtube.com/embed/', 
     c = "" + b + a, 
     d = '" frameborder="0" allowfullscreen></iframe>', 
     e = "" + c + d; 
    $("#play" + a) 
     .empty(e) 
     .append(e) 
     .play("open") 
}; 

誰もが、jqueryのコードを変更することができます。

Answer 1

コードに2行追加しました。

$('div[id^="play"]').empty().hide()は、「再生」で始まるIDを持つidを持つすべての文字を持ち、非表示にします（）。

.show()はあなただけdivを非表示にした場合、ユーチューブは（あなたが音が聞こえます）、バックグラウンドで再生されます.append(e)

function openPlayer(a) { 
 
    var b = '<iframe width="560" height="315" src="https://www.youtube.com/embed/', 
 
    c = "" + b + a, 
 
    d = '" frameborder="0" allowfullscreen></iframe>', 
 
    e = "" + c + d; 
 
    $('div[id^="play"]').empty().hide() 
 
    $("#play" + a) 
 
    .empty(e) 
 
    .append(e) 
 
    .show() 
 
    .play("open") 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="item"> 
 
    <p>DJ Rizmo Ft. Omi & Kid Ink - Cheerleader (Remix)<br> 
 
    <button class="bt-play" onclick="openPlayer('N9l-tHPOEOw')"> Play </button></p> 
 
</div> 
 
<br> 
 
<div id="playN9l-tHPOEOw"></div> 
 

 
<div class="item"> 
 
    <p>Cheerleader (remix) - By Omi feat Kid Ink<br> 
 
    <button class="bt-play" onclick="openPlayer('-w_AjZ_CQuM')"> Play </button></p> 
 
</div> 
 
<br> 
 
<div id="play-w_AjZ_CQuM"></div> 
 

 
<div class="item"> 
 
    <p>Kid ink ft Omi Cheerleader Remix<br> 
 
    <button class="bt-play" onclick="openPlayer('aAS1VMvf3tc')"> Play </button></p> 
 
</div> 
 
<br> 
 
<div id="playaAS1VMvf3tc"></div>

Answer 2

function openPlayer(a){ 
    $('div.item').hide() //It's example function i don't know how u want close this 
    $(this).closest('.item').show() //This is save open handle div 
    var b='<iframe width="560" height="315" src="https://www.youtube.com/embed/',c=""+b+a,d='" frameborder="0" allowfullscreen></iframe>',e=""+c+d;$("#play"+a).empty(e).append(e).play("open") 
}; 

Answer 3

後に追加されます。したがって、empty()をhide()の前に使用してください。以下のコードを試してください。

function openPlayer(a) { 
$("div[id^="play"]").empty().hide(); 
    var b = '<iframe width="560" height="315" src="https://www.youtube.com/embed/', 
c = "" + b + a, 
d = '" frameborder="0" allowfullscreen></iframe>', 
e = "" + c + d; 
$("#play" + a) 
.empty(e) 
.append(e) 
.show() 
.play("open") 
}; 

Answer 4

あなたのJSにこれを追加：あなたがプレイするdiv毎回クリアすることができるように

$('div[id^="play"]').empty(); 

私はむしろあなたがプレイdiv要素を持って提案し、あなたが渡しているIDを持つプレイdivの内側にあなたのフレームを追加します。しかし、どのように上記の作品。それはリストを含むすべてのものを隠し http://jsbin.com/fagayaj/1/edit?html,js,output