0
対応するボタンをクリックするとスワップする必要があるdivがいくつかあります。jqueryを使用してDOM上で視覚的にクリックしてdivをスワップ
などについては<html>
<head>
<style>
.box {
height: 25%;
width: 45%;
padding: 1%;
margin-left: 1%;
margin-top: 1%;
border: 1px solid black;
float: left;
}
</style>
<script src="css/jquery-3.2.0.js"></script>
</head>
<body>
<div class="container">
<div class="box" id="one">
<p>one</p>
<button onclick="moveMe_right()">Swap with right!</button>
<button onclick="moveMe_down()">Swap with down!</button>
</div>
<div class="box" id="two">
<p>two</p>
<button onclick="moveMe_left()">Swap with left!</button>
<button onclick="moveMe_down()">Swap with down!</button>
</div>
<div class="box" id="three">
<p>three</p>
<button onclick="moveMe_right()">Swap with right!</button>
<button onclick="moveMe_top()">Swap with top!</button>
</div>
<div class="box" id="four">
<p>four</p>
<button onclick="moveMe_left()">Swap with left!</button>
<button onclick="moveMe_down()">Swap with down!</button>
</div>
</div>
</body>
</html>
、私はdivの一つに右でスワップをクリックすると、それはそれはに変更する必要があり、視覚だけでなく、DOM内のdiv 1とdivの2入れ替える必要があります - 同様に
<div class="container">
<div class="box" id="two">
<p>two</p>
<button onclick="moveMe_right()">Swap with right!</button>
<button onclick="moveMe_down()">Swap with down!</button>
</div>
<div class="box" id="one">
<p>one</p>
<button onclick="moveMe_left()">Swap with left!</button>
<button onclick="moveMe_down()">Swap with down!</button>
</div>
<div class="box" id="three">
<p>three</p>
<button onclick="moveMe_right()">Swap with right!</button>
<button onclick="moveMe_top()">Swap with top!</button>
</div>
<div class="box" id="four">
<p>four</p>
<button onclick="moveMe_left()">Swap with left!</button>
<button onclick="moveMe_down()">Swap with down!</button>
</div>
</div>
を、左、上、下のdivのいずれかとスワップするために同じことを達成するにはどうすればいいですか？
それ以上に完璧です！ありがとうたくさん:) – Sunny
"topLeft"、 "topRight"とは何ですか？これらはいくつかのランダムなIDで置き換えることができますか？これらのIDのテキストを置き換えようとしていることを理解しています。しかし、我々はparent-box-1、parent-box-2などのようなランダムなidを持つparent divを無作為に生成できますか？ – Sunny
@サニー、うれしかったよ。はい、あなたは正しいです - あなたは、あなたが右または左にいくつかの場所を移動し、同じ方法で上下に移動できるようにしたい命名規則にこれらを変更することができます。 divの数とその行数に応じて、関連するdivの位置を配列/行列などから取得し、そこに名前（またはインデックス）を格納できるように設定することができます。私はちょうどあなたが現在持っているものをカバーするためにこれらの4つ（ハードコード）を使用しました。 20個のdivがある場合は、独自のインデックス/位置決めアルゴリズムに従ってページの読み込みに名前を付けることができます。 –