复选框到 .detach 然后 .prepend 对象
Posted
技术标签:
【中文标题】复选框到 .detach 然后 .prepend 对象【英文标题】：Checkbox to .detach and then .prepend object 【发布时间】：2016-02-15 13:15:57 【问题描述】：我想将 .detach 和 .prepend 与复选框一起使用，我发现这个函数与两个按钮一起使用：
$(document).ready(function()
var x;
$("#btn1").click(function()
x = $("p").detach();
);
$("#btn2").click(function()
$("body").prepend(x);
);
);
但是我怎样才能将它与复选框一起使用呢？当复选框被选中时，它会将元素添加到正文中，当未选中时，将元素分离。
现在我正在使用淡入和淡出，但我想将其更改为分离和前置：
$('#toggle').change(function ()
if (!this.checked)
// ^
$('.content').fadeOut('slow');
else
$('.content').fadeIn('slow');
);
【问题讨论】：
添加什么？body?
是的，它可能是身体。
但是正如我所见，你为什么不尝试用相关的事件和选择器替换你的第一个代码？？？
【参考方案1】：
这个怎么样：-
var x;
$('#toggle').change(function()
if (!this.checked)
x = $('.content').detach();
else
$('body').append(x);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="toggle" checked="true" />
<div class="content">
content content content content content content content content content content content content
</div>【讨论】：
非常感谢 BenG，它运行良好！可以保留 div“前置”的默认状态，当我选中该框时显示它？我是 javascritp 和 jQuery 的新手，仍在学习事件和选择器的工作原理。【参考方案2】：检查this 示例是否有助于您弄清楚。
$(document).ready(function()
var p;
$("#trigger").change(function()
if (this.checked)
$('#mydiv').prepend(p);
p = null;
else
p = $("p").detach();
);
);
p
background: yellow;
margin: 6px 0;
p.off
background: black;
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>detach demo</title>
<link href="style.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="mydiv">
<p>Hello</p>
<p>you?</p>
</div>
Toggle:
<input type="checkbox" name="mycheckbox" id="trigger" checked/>
<script src="script.js"></script>
</body>
</html>
【讨论】：
【参考方案3】：$(function ()
var myCheck = $('input[name=myCheck]'),
content = $('#content');
myCheck.change(function()
if (myCheck.is(':checked'))
content.prependTo(document.body);
else
content.detach();
);
);<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="content"><span>Content</span></div>
<label for="myCheck">
<input type="checkbox" name="myCheck" checked="true">
<span>My Check</span>
</label>
</body>
</html>【讨论】：
以上是关于复选框到 .detach 然后 .prepend 对象的主要内容，如果未能解决你的问题，请参考以下文章
jquery detach 重新显示 div 内容时遇到问题
Entity Framework 数据部分更新之Attach/Detach(转)