jquery - jquery 通过单击将 append() 元素相互切换
问题描述
我有一些用跨度包裹的单词<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
and#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>
推荐阅读
- python - 减法和乘法列
- install4j - 我正在通过文本字段更新变量并尝试在控制台中打印它,但它正在打印以前的值而不是更新的值
- android - Android 布局中的问题 - 软键盘 - 布局对齐
- sql - 如何在单个查询中选择 2 个交叉拆分字符串列
- python - Visual Studio Code 可以将 Python 解释器指向嵌入式版本吗?
- android - 在使用 dopost() 将用户信息插入新行时,在 google app 脚本中设置触发器以自动发送电子邮件
- architecture - 如何在同一微服务的实例之间共享状态
- sql - 将网站反馈存储在数据库中的有效方法
- node.js - Axios 帖子未处理响应
- mrtk - 如何在 HoloLens 1 上模拟手部光线?