【发布时间】：2017-10-16 02:02:10
【问题描述】：
您好，我是一名学习 jQuery 的学生，我的目标是将单击的元素（仅是单个字符）移动到指定的“#chosen”div 区域，其余部分保留（因为我将在之后添加第二个选择选项这一步）。但是，当单击其中一个字符时，所有字符都会移动到那个“#chosen”div。我知道我的代码是错误的且未完成，但我只是不确定如何修复它或如何拆分元素，因为它们都具有相同的类。感谢您提供任何帮助或高级提示，我非常感谢。
JS：
$(document).ready(function() {
//Audio
// var audioElement = $('audio');
// audioElement.attr('src', 'assets/mp3/cantina.mp3');
// audioElement.attr('autoplay', 'autoplay');
// audioElement.loop = true;
//Objects
var hansolo = {
name: "Han Solo",
attack: 10,
hp: 20,
counter: 0,
src: "assets/images/hansolo.jpg",
}
var chewy = {
name: "Chewy",
attack: 10,
hp: 20,
counter: 0,
src: "assets/images/chewy.jpg",
}
var jabba = {
name: "Jabba",
attack: 10,
hp: 20,
counter: 0,
src: "assets/images/jabba.jpg",
}
var greedo = {
name: "Greedo",
attack: 10,
hp: 20,
counter: 0,
src: "assets/images/greedo.jpg",
}
var choices = [hansolo, chewy, jabba, greedo];
var charOptionsRow = $('#charOptions');
$.each(choices, function(index, choice) {
// Create a new div.col-lg-3 to be appended to row.
var charOptionCol = $('<div>')
.addClass('char-option col-lg-3');
// Append image to col.
var charImg = $('<img>')
.addClass('char-img')
.attr('src', choice.src);
charOptionCol.append(charImg);
// Append text to col.
var charText = $('<h3>')
.addClass('char-text')
.text(choice.name);
charOptionCol.append(charText);
// Append column to row.
charOptionsRow.append(charOptionCol);
});
$(document).on('click', '.char-img', 'char-text', function() {
if (hansolo) {
var charPick =$("#chosen");
$('.char-img').appendTo(charPick);
$('.char-text').appendTo(charPick);
}
if (chewy) {
var charPick =$("#chosen");
$('.char-img').appendTo(charPick);
$('.char-text').appendTo(charPick);
}
if (jabba) {
var charPick =$("#chosen");
$('.char-img').appendTo(charPick);
$('.char-text').appendTo(charPick);
}
if (greedo) {
var charPick =$("#chosen");
$('.char-img').appendTo(charPick);
$('.char-text').appendTo(charPick);
}
});
});
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery Game</title>
<link rel="stylesheet" type="text/css" href="assets/css/reset.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div class="container" style="max-width:800px;">
<h1 align="center">Star Wars Game</h1>
<h2 align="center" id="character-text">Choose your character:</h2>
<div class="row" id="charOptions" style="max-width:800px;" align="center">
</div>
<div class="row" align="center" style="max-width:800px;">
<!-- Choice Header -->
<div class="col-lg-6 you" id="chosen" align="center">
<h2 align="center" id="chosen-text" class="hidden">You</h2>
</div>
<!-- First Enemy Header -->
<div class="col-lg-6 fighting" align="center">
<h2 align="center" id="chosen-text" class="hidden">Fighting</h2>
</div>
</div>
<div class="row" align="center" style="max-width:800px;">
<!-- Enemies Header-->
<div class="col-lg-12" id="enemies" align="center">
<h2 align="center" id="enemies-text" class="hidden">Your Enemies</h2>
</div>
</div>
<div class="row" align="center" style="max-width:800px;">
<!-- Enemies -->
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" align="center">
<div id="first-enemy"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" align="center">
<div id="second-enemy"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" align="center">
<div id="third-enemy"></div>
</div>
</div>
</div>
<script src="assets/js/game.js"></script>
</body>
【问题讨论】：
标签： javascript jquery object append