[我在<div id="xxx">中有些用空格括起的单词。如果单击每个单词，它将附加到另一个元素（此处为<div id="yyy">）。我的问题是逆向过程。当我单击最后一个div中的每个单词时，它不会返回到基本div（ID =“ xxx”）。我的代码是：
var s = $("#main").text();
var s1 = s.trim();
var s2 = s1.split(" ");
$.each(s2, function(i, v) {
$("<span/>").text(v).appendTo($("#xxx"))
})
var childrens = $("#xxx").children();
for (var i = 0; i < childrens.length; i++) {
var j = Math.floor(Math.random() * childrens.length);
childrens[i].before(childrens[j]);
}
var toggles = function(id1, id2) {
$(id1).find("span").on('click', function(e) {
$(this).appendTo($(id2));
})
}
if ($("#yyy").children().length > 0) {
toggles("#yyy", "#xxx");
}
if ($("#xxx").children().length > 0) {
toggles("#xxx", "#yyy");
}#yyy {
background-color: bisque;
height: 100px;
}
span {
border width: 1px;
color: white;
background-color: darkgreen;
border-radius: 5px;
font-size: 16px;
padding: 1px 5px;
border-color: darkgreen;
margin: 5px;
display: inline-block;
font-family: sans-serif;
letter-spacing: 0.5px;
cursor: pointer;
}
#xxx {
display: block;
width: 100%;
position: relative;
}
#main {
display: none;
}<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<title></title>
</head>
<body>
<div id="yyy"></div>
<hr>
<p id="main">this is a test</p>
<p id="xxx"></p>
</body>
</html>单击处理程序应检查元素是在xxx还是yyy中并适当地移动它。
var s = $("#main").text();
var s1 = s.trim();
var s2 = s1.split(" ");
$.each(s2, function(i, v) {
$("<span/>").text(v).appendTo($("#xxx"))
})
var childrens = $("#xxx").children();
for (var i = 0; i < childrens.length; i++) {
var j = Math.floor(Math.random() * childrens.length);
childrens[i].before(childrens[j]);
}
$("#xxx span").click(function() {
if ($("#yyy").find(this).length) {
$(this).appendTo("#xxx");
} else {
$(this).appendTo("#yyy");
}
});#yyy {
background-color: bisque;
height: 100px;
}
span {
border width: 1px;
color: white;
background-color: darkgreen;
border-radius: 5px;
font-size: 16px;
padding: 1px 5px;
border-color: darkgreen;
margin: 5px;
display: inline-block;
font-family: sans-serif;
letter-spacing: 0.5px;
cursor: pointer;
}
#xxx {
display: block;
width: 100%;
position: relative;
}
#main {
display: none;
}<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<title></title>
</head>
<body>
<div id="yyy"></div>
<hr>
<p id="main">this is a test</p>
<p id="xxx"></p>
</body>
</html>您可以仅将点击处理委派给#xxx和#yyy元素
var s = $("#main").text();
var s1 = s.trim();
var s2 = s1.split(" ");
$.each(s2, function(i, v) {
$("<span/>").text(v).appendTo($("#xxx"))
})
var childrens = $("#xxx").children();
for (var i = 0; i < childrens.length; i++) {
var j = Math.floor(Math.random() * childrens.length);
childrens[i].before(childrens[j]);
}
$('#xxx').on('click', 'span', function() {
$(this).appendTo($('#yyy'));
})
$('#yyy').on('click', 'span', function() {
$(this).appendTo($('#xxx'));
})#yyy {
background-color: bisque;
height: 100px;
}
span {
border width: 1px;
color: white;
background-color: darkgreen;
border-radius: 5px;
font-size: 16px;
padding: 1px 5px;
border-color: darkgreen;
margin: 5px;
display: inline-block;
font-family: sans-serif;
letter-spacing: 0.5px;
cursor: pointer;
}
#xxx {
display: block;
width: 100%;
position: relative;
}
#main {
display: none;
}<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<title></title>
</head>
<body>
<div id="yyy"></div>
<hr>
<p id="main">this is a test</p>
<p id="xxx"></p>
</body>
</html>