Могу ли я переключать контент через JavaScript или JQuery? У меня есть контент A и контент B, где позиция A находится рядом с предметом зависти, а B - справа, когда я нажимаю флажок, контент B изменится слева, а контент A - справа, а когда я снова нажму, он изменится, как начало снова.

Этот мой фрагмент, я попытался обменять все содержимое div между A и B. Когда я нажму на флажок, все содержимое 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>
1
Rizky Suci Wulandari 1 Май 2019 в 10:03

4 ответа

Лучший ответ

Я рекомендую использовать слушатель событий .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>
1
AntonyMN 1 Май 2019 в 07:23

Если вы просто хотите инвертировать положение двух элементов, вы можете просто использовать flex reverse.

Очевидно, это будет применимо, только если вы не хотите поддерживать фон начальных полей.

Это будет гораздо быстрее обрабатывать, чем восстанавливать дом.

$(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
DreamTeK 1 Май 2019 в 07:44

Используя здесь чистый 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>
1
Junius L. 1 Май 2019 в 07:43

Поскольку вы используете загрузчик, почему бы не воспользоваться колонкой функцией заказа ? Таким образом, это только вопрос изменения имен классов.

Это предполагает, что вы используете оба в одной строке (как в вашем примере).

$('#conta').addClass('order-12').removeClass('order-1');
$('#contb').addClass('order-1').removeClass('order-12');
0
TGN12 1 Май 2019 в 10:26