jquery将div切换到新的div上点击

Question

我想要2 div，并且当您单击div中的特定元素时，将整个div移动到新的div，然后再单击时再返回。

我有某种工作，但它只是移动了特定的类，而不是整个包装它的div。

http://jsfiddle.net/uw446/249/

<div class="lineup-table"> 
     <div id="choose-players" class="player-left"> 
     <div id="lineup" class="player-row"><a>Players Name 1</a><a class="swap">SWAP 1</a></div> 
     <div id="lineup" class="player-row"><a>Players Name 2</a><a class="swap">SWAP 2</a></div> 
     </div> 
     <div id="selected-players" class="player-right"> 
     <div id="lineup" class="player-row-selected"><a>Players Name 1</a><a class="swap">SWAP 3</a></div> 
     <div id="lineup" class="player-row-selected"><a>Players Name 2</a><a class="swap">SWAP 4</a></div> 
     </div> 
</div> 

这里是我迄今为止的功能，但同样不能正常

$(".swap").on("click", function() { 
    var $this = $(this);   
    if($(this).closest("#lineup").length>0){ 
     $this.removeClass("player-row").addClass("player-row-selected").prependTo("#selected-players"); 
    } else { 
     $this.removeClass("player-row-selected").addClass("player-row").prependTo("#choose-players"); 
    } 
}); 

Answer 1

注意ID：它们必须是唯一的。所以相反，要有多个id =“阵容”，你可以增加阵容作为一个额外的类，并使用ids阵容后跟一个数字。

此外，您需要检查，如果当前元素是根据玩家留下与否，从而决定操做：

$(function() { 
 
    $(".swap").on("click", function() { 
 
    var $thisDiv = $(this).closest(".lineup"); 
 
    if($thisDiv.closest(".player-left").length>0){ 
 
     $(this).removeClass("player-row").addClass("player-row-selected"); 
 
     $thisDiv.closest(".lineup").prependTo("#selected-players") 
 
    } else { 
 
     $(this).removeClass("player-row-selected").addClass("player-row"); 
 
     $thisDiv.closest(".lineup").prependTo("#choose-players"); 
 
    } 
 
    }); 
 
});

.lineup-table { width:400px } 
 
.player-left,.player-right { width:196px; display: inline-block;border: 1px solid red; vertical-align:top } 
 
.player-row-selected, .player-row{ height:50px; background-color:#ccc; cursor:pointer;border:1px solid black;margin:5px}

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
 

 
<div class="lineup-table"> 
 
    <div id="choose-players" class="player-left"> 
 
     <div id="lineup1" class="lineup player-row"><a>Players Name 1</a><a class="swap">SWAP 1</a></div> 
 
     <div id="lineup2" class="lineup player-row"><a>Players Name 2</a><a class="swap">SWAP 2</a></div> 
 
    </div> 
 
    <div id="selected-players" class="player-right"> 
 
     <div id="lineup3" class="lineup player-row-selected"><a>Players Name 3</a><a class="swap">SWAP 3</a></div> 
 
     <div id="lineup4" class="lineup player-row-selected"><a>Players Name 4</a><a class="swap">SWAP 4</a></div> 
 
    </div> 
 
</div>

Answer 2

工作尝试针对包含div

$('#lineup').on('click', '.swap', function 

这样，在文档加载后，目标永远不会改变位置。