使用復選框交換div元素內內容的位置
[英]Using checkbox to swap the position of content inside div element
問題描述
我可以通過JavaScript或JQuery切換內容嗎？ 我有內容A和內容B，位置A在嫉妒旁邊，B在右邊，當我單擊復選框時，內容B會變為左側，內容A會變為右側，當我再次單擊時，它將將會再次變回開始。
這是我的摘錄，我嘗試在A和B之間交換所有div內容。當我單擊復選框時，div A中的所有內容都將與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>
4 個解決方案
解決方案1
2 2019-05-01 07:44:59
如果只想反轉兩個元素的位置，則可以簡單地使用flex reverse 。
顯然，這僅在您不想保留初始框的背景時才適用。
這比重建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
我建議使用.click jquery事件偵聽器，如下所示。 然后，我使用.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
在這里使用純JavaScript，使用value獲取輸入的值並交換內容。
您甚至可以通過在swap_content函數中添加另一個參數來使該函數使用不同的類型。 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>
您可以使用相同的函數在周圍交換不同的元素。
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
使用引導程序時，為什么不利用列排序功能 ？ 這樣，只需更改類名即可。
假設您在同一行中都使用了兩者（如您的示例）。
$('#conta').addClass('order-12').removeClass('order-1');
$('#contb').addClass('order-1').removeClass('order-12');
使用復選框交換div中所有內容的位置
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.