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代码：

 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代码，这样它只显示一个#div关闭另一个。

Answer 1

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 2

我在您的代码中添加了2行。

$('div[id^="play"]').empty().hide()会将所有div's的ID设为以＆＃34;播放＆＃34;并隐藏它们。

在.show()

之后添加

.append(e)

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

如果您只隐藏div，youtube将在后台播放（您将听到声音）。因此，请在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[id^="play"]').empty();

我宁愿建议你玩游戏div并将你的框架附加到你正在传递的id的游戏div中，这样你就可以每次都清除游戏div。但任何上述方式都有效。

查看bin链接： http://jsbin.com/fagayaj/1/edit?html,js,output

Jquery - 当其他人打开时自动关闭div

4 个答案: