在 jQuery 和 Rails 中创建和删除 div

Question

在我的网站上，我有不同的盒子，里面装着不同的艺术家，每个盒子上都有一个播放按钮，用于加载 Spotify 播放器。

我正在这样做：

$(document).ready(function(){$(".playid-"+#{artist.id.to_s}).click(function () {
$(".player-id-"+#{artist.id.to_s}).fadeToggle()
;}

工作正常。但是，当我单击 second/third... 播放按钮时，播放器的 div 会一次又一次地创建。

我想要的是检查 div 是否存在，然后 hide/destroy/remove 然后创建播放器的新 div 所以我只创建了 1 div任何时候。

我尝试过使用 .remove，但我不知道使用相同代码创建新 div 的正确方法是：

%div{:class => 'player player-id-'+artist.id.to_s}
  %iframe{:src => 'https://embed.spotify.com/?uri='+artist.spotify_player_url, :width => "100%", :height => "80px", :frameborder => "0", :allowtransparency => "true", :class => "player_spotify"  }

谢谢！

Answer 1

在显示新元素之前隐藏所有 player 元素怎么样？

$(document).ready( function(){
  $(".playid-"+#{artist.id.to_s}).click(function () {
    $(".player").fadeOut();
    if( $(".player-id-"+#{artist.id.to_s}).is(':hidden') ) {
      $(".player-id-"+#{artist.id.to_s}).fadeIn();
    }
  }
});

Answer 2

如果有人需要，这是正确的代码。非常感谢antyrat

$(document).ready( function(){
$(".playid-"+#{artist.id.to_s}).click(function () {
$(".player").fadeOut();
if(!$(".player-id-"+#{artist.id.to_s}).is(":visible")) {
$(".player-id-"+#{artist.id.to_s}).fadeIn();
}
}
)
;}
);

在 jQuery 和 Rails 中创建和删除 div

Create and remove div in jQuery and Rails

javascript

jquery

ruby-on-rails

haml