Блог

Главная - Вопросы по программированию - Как я могу изменить положение div (карты) на кнопке?

Как я могу изменить положение div (карты) на кнопке?

#javascript #jquery #jsp #materialize

#javascript #jquery #jsp #материализовать

Вопрос:

Я использую materialize CSS, и у меня есть следующий код jsp.

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<div class="container">
  <br><br>
  <div class="row">
    <div class="col s12 l6 pull-l4 ">
      <div id="myBoard" style="width: 600px"></div>
    </div>
    <div class="col s12 l3">
      <div class="card">
        <div class="card-content">
          <div id="clock-black">Inside clock-black</div>
        </div>
      </div>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      <div class="card">
        <div class="card-content">
          <div id="clock-white">Inside clock-white</div>
        </div>
      </div>
    </div>

    <div class="col s12 l3 push-l1 ">
      <label>Status:</label>
      <div id="status"></div>
      <br><br>
      <a class="btn" id=flip>Flip board</a>
    </div>
  </div>

Я хочу инвертировать две карты (часы-черные и часы-белые), нажав на эту кнопку. Как я могу это сделать?

Ответ №1:

Вы можете использовать метод replaceWith jquery для замены одного элемента на другой.

Демонстрационный код :


 //onclick of button this will get called
$("#flip").click(function() {
//getting div id
  var div1 = $("#clock-white");
  var div2 = $("#clock-black");
  //cloning div
  var $clock_white = div1.clone();
  var $clock_black = div2.clone();
//replace div with other
  div1.replaceWith($clock_black);
  div2.replaceWith($clock_white);
}) 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<div class="container">
  <br><br>
  <div class="row">
    <div class="col s12 l6 pull-l4 ">
      <div id="myBoard" style="width: 600px"></div>
    </div>
    <div class="col s12 l3">
      <div class="card">
        <div class="card-content">
          <div id="clock-black">Inside clock-black</div>
        </div>
      </div>

      <div class="card">
        <div class="card-content">
          <div id="clock-white">Inside clock-white</div>
        </div>
      </div>
    </div>

    <div class="col s12 l3 push-l1 ">
      <label>Status:</label>
      <div id="status"></div>
      <br><br>
      <a class="btn" id=flip>Flip board</a>
    </div>
  </div>