使用復選框交換div中所有內容的位置
[英]swap the position of all content inside div using a Check Box
問題描述
我可以通過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>
2 個解決方案
解決方案1
1 已采納 2019-05-01 12:39:08
僅輸入值會發生變化，因為這是您所有嘗試使用的代碼（ text_id1和text_id2 ）。
你有正確的想法，但你真的只需要交換的內容div id="conta"和div id="contb" ，但只有表單域元素具有value屬性。 div元素具有.textContent屬性（用於僅獲取/設置元素中的文本）或.innerHTML屬性（用於獲取/設置包含需要解析的HTML的文本）。
最后，請勿使用內聯HTML事件屬性，例如onclick 。 有很多原因不使用這種已有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>
解決方案2
0 2019-05-01 08:14:10
您可以嘗試以下方法：
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')"
如何檢查是否使用 jQuery 檢查了 div 中的所有復選框？
[英]How to check if all checkboxes inside a div are checked using jQuery?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.