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

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

1 голос
/ 25 мая 2020

Я использую материализацию 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 Ответ

1 голос
/ 25 мая 2020

Вы можете использовать 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>
...