使用复选框交换div中所有内容的位置
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用复选框交换div中所有内容的位置相关的知识，希望对你有一定的参考价值。
我可以通过javascript或JQuery切换内容吗？我有内容A和内容B，其中位置A紧挨着嫉妒而B位于右侧，当我点击复选框时，内容B将更改为左侧，内容A将更改为右侧，当我再次单击时，它将再次变为开头。
这是我的片段，我尝试在A和B之间交换所有div内容。当我点击复选框时，div中的所有内容都将与div B交换。但为什么只有输入表格会改变？虽然内容没有变化，有人可以帮助我吗？我的代码有问题吗？
function swap_content(conta,contb)
{
var tmp = document.getElementById(conta).value;
document.getElementById(conta).value = document.getElementById(contb).value;
document.getElementById(contb).value = tmp;
var tdp = document.getElementById(text_id1).value;
document.getElementById(text_id1).value = document.getElementById(text_id2).value;
document.getElementById(text_id2).value = tdp;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/bootstrap.min.css" rel="stylesheet">
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/animate.css" rel="stylesheet">
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/style.css" rel="stylesheet">
<body>
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-lg-5" id="conta" style="background: red;">
<div class="ibox ">
<div class="ibox-title">
<h5>
<input type="text" name="text_id1" id="text_id1" value="content A" >
</h5>
</div>
<div class="ibox-body">
<span style="color:white">
This is desc about Content A </span><br>
<img src="https://live.staticflickr.com/7254/7740405218_d3b9c5e839_h.jpg" width="100px" height="100px">
</div>
</div>
</div>
<div class="col-lg-2">
<div class="ibox ">
<div class="ibox-title">
<div class="switch">
<div class="onoffswitch">
<input type="checkbox" checked class="onoffswitch-checkbox" id="example1" onclick="swap_content('text_id1','text_id2')">
<label class="onoffswitch-label" for="example1">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-5" id="contb" style="background: blue">
<div class="ibox ">
<div class="ibox-title">
<h5>
<input type="text" name="text_id2" id="text_id2" value="content B" >
</h5>
</div>
<div class="ibox-body">
<span style="color:white">This is desc about Content B</span> <br>
<img src="https://live.staticflickr.com/1429/5164748081_b2e7e19108_b.jpg" width="100px" height="100px">
</div>
</div>
</div>
</div>
</div>
<script src="http://webapplayers.com/inspinia_admin-v2.8/js/jquery-3.1.1.min.js"></script>
</body>答案
只有输入值会发生变化，因为这是您尝试使用的所有代码（text_id1和text_id2）。
你有正确的想法，但你真的只需要交换div id="conta"和div id="contb"的内容，但只有form-field元素有value属性。 div元素具有.textContent属性（用于获取/设置元素中的文本）或.innerhtml属性（用于获取/设置包含需要解析的HTML的文本）。
最后，不要使用内联HTML事件属性，例如onclick。有a bunch of reasons不使用这个25岁以上的技术。相反，在JavaScript中执行所有事件绑定 - 与HTML分开。
// Get reference to the checkbox and set up click event handler
var cb = document.getElementById("example1").addEventListener("click", swap_content);
// Store references to the two div elements
var conta = document.getElementById("conta");
var contb = document.getElementById("contb");
function swap_content() {
// Non-form field elements don't have .value, they have .innerHTML
var tmp = conta.innerHTML;
conta.innerHTML = contb.innerHTML;
contb.innerHTML = tmp;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/bootstrap.min.css" rel="stylesheet">
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/animate.css" rel="stylesheet">
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/style.css" rel="stylesheet">
<body>
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-lg-5" id="conta" style="background: red;">
<div class="ibox ">
<div class="ibox-title">
<h5>
<input type="text" name="text_id1" id="text_id1" value="content A" >
</h5>
</div>
<div class="ibox-body">
<span style="color:white">
This is desc about Content A </span><br>
<img src="https://live.staticflickr.com/7254/7740405218_d3b9c5e839_h.jpg" width="100px" height="100px">
</div>
</div>
</div>
<div class="col-lg-2">
<div class="ibox ">
<div class="ibox-title">
<div class="switch">
<div class="onoffswitch">
<input type="checkbox" checked class="onoffswitch-checkbox" id="example1">
<label class="onoffswitch-label" for="example1">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-5" id="contb" style="background: blue">
<div class="ibox ">
<div class="ibox-title">
<h5>
<input type="text" name="text_id2" id="text_id2" value="content B" >
</h5>
</div>
<div class="ibox-body">
<span style="color:white">This is desc about Content B</span> <br>
<img src="https://live.staticflickr.com/1429/5164748081_b2e7e19108_b.jpg" width="100px" height="100px">
</div>
</div>
</div>
</div>
</div>
<script src="http://webapplayers.com/inspinia_admin-v2.8/js/jquery-3.1.1.min.js"></script>
</body>另一答案
你可以试试这个：
function swap_content(conta, contb) {
var contentA = document.getElementById(conta).innerHTML;
document.getElementById(conta).innerHTML = document.getElementById(contb).innerHTML;
document.getElementById(contb).innerHTML = contentA;
}
注意：您需要传递您愿意交换的div的id。将onlick功能更改为onclick="swap_content('conta','contb')"
以上是关于使用复选框交换div中所有内容的位置的主要内容，如果未能解决你的问题，请参考以下文章
如果在该 div 中选中了所有子复选框，则选中/取消选中（全选复选框）