質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.08%

javascriptの「.clone」で複製するときに、複製する要素を指定する方法

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,799
退会済みユーザー

退会済みユーザー

■目的

javascriptの「.clone」で複製するときに、複製する要素を指定したいです。具体的には、

下記のように「複製ボタン」があるとき、ボタンのあるセクションの要素を複製したい。という目的です。

<section id="A">
「複製する要素」
「複製ボタン」
</section>

<section id="B">
「複製する要素」
「複製ボタン」
</section>

★★ここに要素を複製(sectionBのボタンを押したらsectionBの要素だけを複製したい。)★★

■現状の問題

現状は次のように、
・複製する要素が指定できていない。
・「複製ボタン」を押すたびに追加されていってしまう。
という問題があります。

☆実際の動作
https://jsfiddle.net/vdavs81a/

☆上のコード

<!-- 【スライダーA】 -->
<section id="A">
<div class="slider">
  <input type="radio" name="slider-a" id="slider-a1" class="slider1" value="a1" checked>
  <input type="radio" name="slider-a" id="slider-a2" class="slider2" value="a2">
  <input type="radio" name="slider-a" id="slider-a3" class="slider3" value="a3">
  <div class="inner_slider">
    <label for="slider-a2"><img src="http://bit.ly/2sNLCTb" class="img1"></label>
    <label for="slider-a3"><img src="http://bit.ly/2FtAkX4" class="img2"></label>
    <label for="slider-a1"><img src="http://bit.ly/2FrhxLM" class="img3"></label>
  </div>
</div>
  <div class="hukusei">複製ボタン</div>
</section>

<!-- 【スライダーB】 -->
<section id="B">
<div class="slider">
  <input type="radio" name="slider-b" id="slider-b1" class="slider1" value="b1" checked>
  <input type="radio" name="slider-b" id="slider-b2" class="slider2" value="b2">
  <div class="inner_slider">
    <label for="slider-b2"><img src="http://bit.ly/2oySzSB" class="img1"></label>
    <label for="slider-b1"><img src="http://bit.ly/2ozsrXV" class="img2"></label>
  </div>
</div>
  <div class="hukusei">複製ボタン</div>
</section>

<!-- 【複製画像】 -->   
<p>▼▼ここに複製▼▼</p>
<div class="linkimg"></div>
/* 【スライダー】のCSS */
.slider {
width: 200px;
height: 150px;
overflow: hidden;
}
.img1 {
position: absolute;
left: 0;
top: 0;
}
.img2 {
position: absolute;
left: 200px;
top: 0;
}
.img3 {
position: absolute;
left: 400px;
top: 0;
}
.img4 {
position: absolute;
left: 600px;
top: 0;
}

.inner_slider {
position: relative;
width: 800px;
left: 0;
top: 0;
transition: all .3s ease-in-out;
}
.inner_slider > img {
  width: inherit;
  height: inherit;
  object-fit: contain;
}

.slider1:checked ~ .inner_slider {
transform: translateX(0);
}
.slider2:checked ~ .inner_slider {
transform: translateX(-200px);
}
.slider3:checked ~ .inner_slider {
transform: translateX(-400px);
}
$(".hukusei").click(function(){
    $("div:first").clone().appendTo(".linkimg");
})


HTMLの構造は変えずに解決したいです。
javascriptお詳しい方、よろしくお願いいたします。m(_ _)m

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

これでどうでしょう。

$(".hukusei").click(function(){
  var cloneObject = $(this).parent().find("div:first").clone();
});

追記:
何をもって「cloneできない」と言っているかわかりませんが、当方(Win10xEdge)では下記の書き方でcloneされた画像が結果反映部に表示されています。

<script>
$(document).ready(function(){
    $(".hukusei").click(function(){
        var cloneObject = $(this).parent().find("div:first").clone();
        // console.log(cloneObject[0]);
            $(".linkimg").empty(); //貼り付け先を空にする、というのを忘れてました><
        cloneObject.appendTo($(".linkimg"));
    })
});
</script>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/02/27 16:15

    「$(".linkimg").html("")」というやり方も。

    キャンセル

  • 2018/02/27 16:22

    たびたびありがとうございま!!

    やってみたのですけれど、やはり上書きされずどんどん追加されてしまいます。困りました。jsfiddleではできているのに、不思議です。

    ひとまず「新しく追加されたやつ以外はdisplaynoneしてね」で無理やり対処しました。笑

    「ひょっとしてこれじゃないの?」など、また思いつくことがございましたら、いつでもコメントお待ちしております。

    キャンセル

  • 2018/02/28 13:23 編集

    また別の問題が…

    ご教示いただいたコードで画像がcloneされるとき、、

    なぜか参照元のスライダーが、最初に表示されている画像に戻ってしまう現象が起こるのですけれど、これを起こさない方法はございませんでしょうか?

    https://jsfiddle.net/vdavs81a/43/
    →「複製ボタン」をクリックすると、勝手にスライダーが戻るのです。

    なんども本当にすみません。他に頼る人いなくて。。(>_<)

    キャンセル

+1

$(function(){
    $('.hukusei').click(function(){
        var $section = $(this).closest('section');
        var id = $('input[type="radio"]:checked', $section).val();
        var $target = $('label[for="slider-'+id+'"]', $section); //選択されている要素

        $('.linkimg')
            .empty() //一回空にする
            .append($target.clone()); //複製
    })
})

動作はこれで行けるかと
CSSを調整しないといけないかもです。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/02/27 14:59

    ありがとうございます。

    む~、惜しいですね。どうやら、

    ラジオボタンで選択中の画像(画像スライダーで表示中の画像)の、一個手前の画像

    が複製されてしまうようです。。

    キャンセル

  • 2018/02/27 15:13

    slider-a2 img1
    slider-a3 img2
    slider-a1 img3
    となっています。
    連番を振り直したら直ると思います

    キャンセル

  • 2018/02/27 15:16

    なるほど。ありがとうございます。

    実はその連番は、ラジオボタンをスライダー化するために必要な連番でして、振り直すわけにはいかないのです。(>_<)

    今回はtkturboさんのご回答をベストアンサーにさせていただきました。
    でも、ご回答ほんとうにありがとうございます。感謝です。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.08%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る