使用复选框交换div中所有内容的位置 [英] swap the position of all content inside div using a Check Box
问题描述
我可以通过JavaScript或JQuery切换内容吗？我有内容A和内容B，其中位置A紧挨着嫉妒而B位于右侧，当我点击复选框时，内容B将更改为左侧，内容A将更改为右侧，当我再次单击时，它将再次改为开头。
Can I switch the content via JavaScript or JQuery? I have content A and content B, where position A is next to envy and B is on the right, when I click the check box the content B will change to the left and content A to the right, and when I click again, it will change to like the beginning again.
这个我的片段，我尝试在A和B之间交换所有div内容。当我点击复选框时，会有所有div中的内容将与div B交换。
，但为什么只有输入表格会改变？虽然内容没有变化，有人可以帮助我吗？
我的代码有问题吗？
This my snippet, I tried exchanging all div content between A and B. When I clicked on the check box, there will be all content in div A will exchange with div B. but why does only the input form change? while the content doesn't change, can anyone help me? is there something wrong with my code?
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 ）。
Only the input values change because that's all your code attempts to work with (text_id1 and text_id2).
你有正确的想法，但你真的只需要交换 div id =conta和<$的内容c $ c> div id =contb，但只有表单字段元素具有值属性。 div 元素具有 .textContent 属性（用于获取/设置元素中的文本）或 .innerHTML property（用于获取/设置文本）包含需要解析的HTML）。
You had the right idea, but you really just need to swap the contents of div id="conta" and div id="contb", but only form-field elements have a value property. div elements have either the .textContent property (for getting/setting just the text within the element) or the .innerHTML property (for getting/setting text that contains HTML that needs to be parsed).
最后，不要使用内联HTML事件属性，例如 onclick 。有一系列理由没有使用这种25岁以上的技术。相反，在JavaScript中执行所有事件绑定 - 与HTML分开。
Lastly, don't use inline HTML event attributes, such as onclick. There are a bunch of reasons not to use this 25+ year old technique. Instead, do all your event binding in JavaScript - separate from your 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>
这篇关于使用复选框交换div中所有内容的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
