时间戳

首页 > 解决方案 > 使用复选框交换 div 内所有内容的位置

javascript - 使用复选框交换 div 内所有内容的位置

问题描述

我可以通过 JavaScript 或 JQuery 切换内容吗？我有内容 A 和内容 B，其中位置 A 在 envy 旁边，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>

标签： javascriptjqueryhtml

解决方案

只有输入值会发生变化，因为这是您的所有代码都尝试使用 (text_id1和text_id2)。

你的想法是对的，但你真的只需要交换 and 的内容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>

推荐阅读