Question

我可以通过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>

Answer 1

如果只想反转两个元素的位置，则可以简单地使用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>

Answer 2

我建议使用.click jQuery Event Listener，如下所示。然后，我用.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>

Answer 3

此处使用纯JavaScript，使用value来获取输入值并交换内容。

您甚至可以通过向swap_content函数添加另一个参数来使该函数使用不同的类型。 function swap_content(conta, contb, type = 'input'){}现在可以使用div和输入。

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>

Answer 4

使用引导程序时，为什么不利用ordering feature列呢？这样，只需更改类名即可。

这假设您在同一行中都使用了两者（如您的示例中所示）。

$('#conta').addClass('order-12').removeClass('order-1');
$('#contb').addClass('order-1').removeClass('order-12');

使用复选框交换div元素内内容的位置

4 个答案: