jquery將div切換到新的div上點擊

我想要2 div，並且當您單擊div中的特定元素時，將整個div移動到新的div，然後再單擊時再返回。jquery將div切換到新的div上點擊

我有某種工作，但它只是移動了特定的類，而不是整個包裝它的div。

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

來源

2016-03-14 MShack

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

來源

2016-03-14 21:30:55 gaetanoM

工作嘗試針對包含div

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

這樣，在文檔加載後，目標永遠不會改變位置。

來源

2016-03-14 20:57:01

jquery將div切換到新的div上點擊

回答

相關問題