我的程序是一个游戏,从 4 个可玩 Angular 色开始,每个 Angular 色都在自己的类 charContainer
中,这 4 个 div 位于类 character
的容器中。当玩家通过点击选择一个 Angular 色时,它会将其移动到类为 your
的容器中。之后容器 characters
中剩余未选择的字符移动到另一个名为 enemies
的 div 容器。这个 div 会将剩余的 3 个未单击的 div 移动到它。在此之后,玩家选择一个对手。我正在尝试将选定的对手移动到名为 opponent
的 div 容器中,但它一直附加到 your
容器中。我尝试删除类名 charContainer
并添加类 foes
但它仍然不起作用。
$(document).ready(function() {
$('.charContainer').on('click', function() {
$('#your').append($(this));
$('.characters>.charContainer').each(function() {
$(this).removeClass('charContainer').addClass('foes');
$('#enemies').append($(this));
})
$('.characters').remove();
})
$('.foes').on('click', function() {
$('#opponent').append($(this));
// $(this).appendTo('#opponent');
$(this).addClass('defender');
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="characters">
<div class="charContainer darth">
<h2 id="c1"></h2>
<img class="vade" src="assets/images/vader.jpg">
<p id="c1hp" data-hp="120"></p>
</div>
<div class="charContainer luke">
<h2 id="c2"></h2>
<img class="skywalker" src="assets/images/luke.jpg">
<p id="c2hp" data-hp="100"></p>
</div>
<div class="charContainer won">
<h2 id="c3"></h2>
<img class="obi" src="assets/images/obiwan.jpg">
<p id="c3hp" data-hp="150"></p>
</div>
<div class="charContainer maul">
<h2 id="c4"></h2>
<img class="dmaul" src="assets/images/maul.png">
<p id="c4hp" data-hp="180"></p>
</div>
</div>
<div id="your">
<h2>Your Character</h2>
<!-- <img class="dmaul" src="assets/images/maul.png"> -->
</div>
<div id="enemies">
<h2>Enemies</h2>
<!-- <img class="dmaul" src="assets/images/maul.png"> -->
</div>
<div id="fightSection">
<h2>Fight Section</h2>
<button id="attack" class="attk">
<h1>Attack</h1>
</button>
</div>
<div id="opponent">
<h2>Opponent</h2>
<!-- <img class="dmaul" src="assets/images/maul.png"> -->
</div>
删除charContainer
类并添加foes
类后,foes
的onclick
函数仍然发送到 your
div,即使我摆脱了 charContainer
。我需要它去 opponent
div。
最佳答案
调用.off("click")
$(".characters>.charContainer").off("click")
在 .characters>.charContainer
click
处理程序中将 click
从 .charContainer
元素中分离出来。
在 #enemies
元素处使用事件委托(delegate),.one()
,如果只有一个 .foes
元素应该附加到 #opponenent
元素
$('#enemies').one('click', ".foes", function() {})
将 click
附加到 #enemies
元素时,当元素动态添加 className
foes
时调用处理程序被点击
$(document).ready(function() {
$('.charContainer').on('click', function(e) {
$("#your").append(this);
$('.characters>.charContainer')
.off("click")
.each(function() {
$(this).removeClass('charContainer')
.addClass('foes');
$('#enemies').append(this);
})
$('.characters').remove();
})
$('#enemies').one('click', ".foes", function() {
$('#opponent').append($(this));
// $(this).appendTo('#opponent');
$(this).addClass('defender');
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="characters">
<div class="charContainer darth">
<h2 id="c1"></h2>
<img class="vade" src="assets/images/vader.jpg" alt="vader">
<p id="c1hp" data-hp="120"></p>
</div>
<div class="charContainer luke">
<h2 id="c2"></h2>
<img class="skywalker" src="assets/images/luke.jpg" alt="luke">
<p id="c2hp" data-hp="100"></p>
</div>
<div class="charContainer won">
<h2 id="c3"></h2>
<img class="obi" src="assets/images/obiwan.jpg" alt="obiwan">
<p id="c3hp" data-hp="150"></p>
</div>
<div class="charContainer maul">
<h2 id="c4"></h2>
<img class="dmaul" src="assets/images/maul.png" alt="maul">
<p id="c4hp" data-hp="180"></p>
</div>
</div>
<div id="your">
<h2>Your Character</h2>
<!-- <img class="dmaul" src="assets/images/maul.png"> -->
</div>
<div id="enemies">
<h2>Enemies</h2>
<!-- <img class="dmaul" src="assets/images/maul.png"> -->
</div>
<div id="fightSection">
<h2>Fight Section</h2>
<button id="attack" class="attk">
<h1>Attack</h1>
</button>
</div>
<div id="opponent">
<h2>Opponent</h2>
<!-- <img class="dmaul" src="assets/images/maul.png"> -->
</div>
关于javascript - 在 div 已经附加到一个 div 之后,将 div 附加到另一个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40077905/