如何更改按鈕上的 div（卡）position？

Question

我正在使用物化 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>

我想通過單擊此按鈕反轉兩張卡片（黑色時鍾和白色時鍾）。 我怎樣才能做到這一點？

Answer 1

您可以使用jquery的 replaceWith 方法將一個元素替換為另一個元素。

演示代碼：

 //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>