使用复选框交换div元素内内容的位置
[英]Using checkbox to swap the position of content inside div element
问题描述
Can I switch the content via JavaScript or JQuery? 
我可以通过JavaScript或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，位置A在嫉妒旁边，B在右边，当我单击复选框时，内容B会变为左侧，内容A会变为右侧，当我再次单击时，它将将会再次变回开始。
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? 这是我的摘录，我尝试在A和B之间交换所有div内容。当我单击复选框时，div A中的所有内容都将与div B交换。但是为什么仅输入表单会更改？ 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>
4 个解决方案
解决方案1
2 2019-05-01 07:44:59
If you simply want to invert the position of the two elements you can simply use flex reverse . 如果只想反转两个元素的位置，则可以简单地使用flex reverse 。
Obviously this will only be applicable if you don't want to maintain the background of the initial boxes. 显然，这仅在您不想保留初始框的背景时才适用。
This will be much faster to process than rebuilding the dom. 这比重建dom要快得多。
$(function() { cbToggleFields(); }); $('#example1').off('change').on('change', function() { cbToggleFields(); }); function cbToggleFields() { if ($('#example1').is(':checked')) { $('#rowA').addClass('reverse'); } else { $('#rowA').removeClass('reverse'); } }
#rowA{ display:flex; flex-direction:row; justify-content:left; /*For vertical alignment*/ /*flex-direction:column;*/ } #rowA.reverse{ flex-direction:row-reverse; /*flex-direction:column-reverse;*/ }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrapper wrapper-content animated fadeInRight"> <div id="rowA" 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" 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>
解决方案2
1 已采纳 2019-05-01 07:23:08
I recommend using the .click jquery Event Listener to as I have done below. 我建议使用.click jquery事件侦听器，如下所示。 Then I used .html() to get the contents of the div and to swap the contents. 然后，我使用.html()获取div的内容并交换内容。
$('#example1').click(function() { var conta = $('#conta').html(); var contb = $('#contb').html(); $('#conta').html(contb); $('#contb').html(conta); });
<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> </body>
解决方案3
1 2019-05-01 07:29:37
Using pure javascript here, use value to get the value of the input and swap the content around. 在这里使用纯JavaScript，使用value获取输入的值并交换内容。
You can even make the function work with different types by adding another paramter to the swap_content function. 您甚至可以通过在swap_content函数中添加另一个参数来使该函数使用不同的类型。 function swap_content(conta, contb, type = 'input'){} now it will work with divs and inputs. function swap_content(conta, contb, type = 'input'){}现在可以使用div和input了。
function swap_content(conta, contb, type = 'input') { // check wether to use innerHTM or value for inputs var contentType = type === 'input' ? 'value' : 'innerHTML'; var contenta = document.getElementById(conta)[contentType]; var contentb = document.getElementById(contb)[contentType]; document.getElementById(conta)[contentType] = contentb; document.getElementById(contb)[contentType] = contenta; }
<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>
You can use the same function to swap different elements around. 您可以使用相同的函数在周围交换不同的元素。
function swap_content(conta, contb, type = 'input') { // check wether to use innerHTM or value for inputs var contentType = type === 'input' ? 'value' : 'innerHTML'; var contenta = document.getElementById(conta)[contentType]; var contentb = document.getElementById(contb)[contentType]; document.getElementById(conta)[contentType] = contentb; document.getElementById(contb)[contentType] = contenta; } function swap_items() { swap_content('conta', 'contb', 'innerHTML'); // swap items using innerHTML swap_content('inp1', 'inp2'); // swap items using value for input }
<div id="conta"><p>I will be displayed on second place on dropdown's particular value</p></div> <div id="contb"><p>I will be displayed on first place on dropdown's same value for which first div is placed at second position</p></div> <input type="text" id="inp1" value="Will be placed second" /> <input type="text" id="inp2" value="Will be placed first" /> <button onclick="swap_items();">Swap content</button>
解决方案4
0 2019-05-01 10:26:42
As you are using bootstrap, why not take advantage of the column ordering feature ? 使用引导程序时，为什么不利用列排序功能 ？ This way it is only a matter of changing class names. 这样，只需更改类名即可。
This assume you are using both on the same row (as in your example). 假设您在同一行中都使用了两者（如您的示例）。
$('#conta').addClass('order-12').removeClass('order-1');
$('#contb').addClass('order-1').removeClass('order-12');
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
使用复选框交换div中所有内容的位置 - swap the position of all content inside div using a Check Box
使用div元素作为复选框 - using a div element as a checkbox
使用ID交换两个DIV的位置 - Swap Position of two DIV using ID
使用链接交换/更改div内容 - Swap/Change div content using links
使用jQuery更改父div内的元素位置 - Changing element position inside parent div using jquery
用动画交换div位置 - Swap div position with animation
如何 position svg 元素内的复选框？ - How to position a checkbox inside an svg element?
在div元素内找出鼠标位置？ - inside div element find out mouse position?
div中的粘性元素，滚动上的绝对位置 - Sticky element inside a div with absolute position on scroll
位置固定元素始终在div内 - position fixed element always inside the div
相关标签