回答編集履歴
3
最終修正
answer
CHANGED
|
@@ -1,20 +1,23 @@
|
|
|
1
|
+
コメント欄の仕様を反映させた、最終的なものを載せておきます。
|
|
1
|
-
こんな感じでどうでしょう。
|
|
2
|
+
~~こんな感じでどうでしょう。~~
|
|
2
3
|
|
|
4
|
+
|
|
3
5
|
```javascript
|
|
4
6
|
$('img').on('click', function (eventObject) {
|
|
5
7
|
|
|
6
8
|
// クリックされた画像を取得する
|
|
7
9
|
let clickedImg = $(eventObject.target);
|
|
8
10
|
|
|
9
|
-
// 画像
|
|
11
|
+
// 同グループの画像をクローンします
|
|
10
12
|
var clonedImgs = $(clickedImg)
|
|
11
13
|
.closest('.ImgTarget')
|
|
12
14
|
.find('img')
|
|
13
15
|
.toArray()
|
|
14
16
|
.map(o => $(o).clone());
|
|
15
17
|
|
|
16
|
-
// 画像をhtml上に配置
|
|
18
|
+
// 配置場所を空にしたうえで、画像をhtml上に配置します
|
|
17
19
|
var dest = $('#ImgResult');
|
|
20
|
+
dest.empty();
|
|
18
21
|
clonedImgs.forEach(o => dest.append(o));
|
|
19
22
|
|
|
20
23
|
});
|
2
更新しました☆☆
answer
CHANGED
|
@@ -1,19 +1,21 @@
|
|
|
1
1
|
こんな感じでどうでしょう。
|
|
2
2
|
|
|
3
3
|
```javascript
|
|
4
|
-
$('img').on('click', function () {
|
|
4
|
+
$('img').on('click', function (eventObject) {
|
|
5
5
|
|
|
6
|
+
// クリックされた画像を取得する
|
|
7
|
+
let clickedImg = $(eventObject.target);
|
|
8
|
+
|
|
6
9
|
// 画像の親を取得、クローンします
|
|
10
|
+
var clonedImgs = $(clickedImg)
|
|
7
|
-
|
|
11
|
+
.closest('.ImgTarget')
|
|
12
|
+
.find('img')
|
|
8
13
|
.toArray()
|
|
9
|
-
// 直近の親がdivがいいならこれ
|
|
10
|
-
.map(o => $(o).closest("div").clone());
|
|
11
|
-
// 直近の親がなんでもいいならこれ
|
|
12
|
-
|
|
14
|
+
.map(o => $(o).clone());
|
|
13
15
|
|
|
14
16
|
// 画像をhtml上に配置(移動)します
|
|
15
17
|
var dest = $('#ImgResult');
|
|
16
|
-
|
|
18
|
+
clonedImgs.forEach(o => dest.append(o));
|
|
17
19
|
|
|
18
20
|
});
|
|
19
21
|
```
|
1
修正したよ★
answer
CHANGED
|
@@ -3,15 +3,17 @@
|
|
|
3
3
|
```javascript
|
|
4
4
|
$('img').on('click', function () {
|
|
5
5
|
|
|
6
|
-
// 画像を取得します
|
|
6
|
+
// 画像の親を取得、クローンします
|
|
7
|
-
var imgs = $('.ImgTarget img')
|
|
7
|
+
var imgs = $('.ImgTarget img')
|
|
8
|
+
.toArray()
|
|
9
|
+
// 直近の親がdivがいいならこれ
|
|
10
|
+
.map(o => $(o).closest("div").clone());
|
|
11
|
+
// 直近の親がなんでもいいならこれ
|
|
12
|
+
//.map(o => $(o).parent().clone());
|
|
8
13
|
|
|
9
14
|
// 画像をhtml上に配置(移動)します
|
|
10
15
|
var dest = $('#ImgResult');
|
|
11
|
-
imgs.
|
|
16
|
+
imgs.forEach(o => dest.append(o));
|
|
12
|
-
o.remove();
|
|
13
|
-
dest.append(o);
|
|
14
|
-
});
|
|
15
17
|
|
|
16
18
|
});
|
|
17
19
|
```
|