

以下のコードで”newImg_boat”タブに選択後の画像を載せたいのですが、うまくいかず困っています。  
コメントアウトしているコードは、あれやこれや試した結果です。2日くらい悩んでいます。  
よろしくお願いいたします。

[code]

    $(function() {
      $('.dropdown-menu .dropdown-item').click(function() {
        var visibleItem = $('.dropdown-toggle', $(this).closest('.dropdown'));
        //var visibleItem_img = $('.dropdown-toggle', $(this).closest('.dropdown').closest('.dropdown'));
        //var visibleItem_img = $('.dropdown-toggle', $('.dropdown_img').closest('.dropdown'));
        //var visibleItem_img = $('.dropdown-toggle', $(this).closest('.dropdown').children('.dropdown_img'));
        //var visibleItem_img = $('.dropdown-toggle', $(this).children('.dropdown_img'));
        //var visibleItem_img = $('.dropdown_img', $(this).closest('.dropdown'));
        //visibleItem.text($(this).attr('value'));
        //var visibleItem_img2 = visibleItem_img.text($(this).attr('src'));
        //visibleItem.text($(this).attr('src'));
        //var visibleItem_img = visibleItem.val($(this).attr('src'));
        //var visibleItem_img = $('.dropdown_img').attr('src');
        //console.log(visibleItem_img2);
    
        var visibleItem_img = $('.dropdown-toggle', $(this).find('.dropdown-img'));
        var visibleItem_img2 = visibleItem_img.text($(this).attr('src'));
        document.getElementById("newImg_boat").src = visibleItem_img2;
    
      });
    });
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="dropdown">
      <button type="button" class="btn btn-primary dropdown-toggle btn-lg" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ヨットのクラスを選択</button>
      <ul class="dropdown-menu">
        <li><button class="dropdown-item" value="laser"><img class="dropdown-img" src="img/laser.PNG" alt="laser"></button></li>
        <li><button class="dropdown-item" value="laser radial"><img class="dropdown-img" src="img/laser_radial.PNG" alt="laser_radial"></button></li>
        <li><button class="dropdown-item" value="laser_4.7"><img class="dropdown-img" src="img/laser_4.7.PNG" alt="laser_4.7"></button></li>
        <li><button class="dropdown-item" value="470"><img class="dropdown-img" src="img/470.PNG" alt="470"></button></li>
        <li><button class="dropdown-item" value="snipe"><img class="dropdown-img" src="img/snipe.PNG" alt="snipe"></button></li>
        <li><button class="dropdown-item" value="taser"><img class="dropdown-img" src="img/taser.PNG" alt="taser"></button></li>
        <li><button class="dropdown-item" value="optimist"><img class="dropdown-img" src="img/optimist.PNG" alt="optimist"></button></li>
      </ul>
    </div>
    
    <div type="image" id="newImg_boat"></div>
[/code]


CC BY-SA 4.0
2019-12-23T08:16:57.710
61701
2019-12-24T00:58:50.220
2019-12-24T00:58:50.220
3060
37170
question
javascript jquery html5 twitter-bootstrap
bootstrapのdropdownで選択した画像を別の要素に表示させる方法


選択した画像を別の要素で表示するために行う必要があることは、以下の二つです:

  1. クリックされた要素と対応する画像の URL を得る。
  2. 手順 1 で得た URL を別の要素の `src` 属性へ設定する。

また、質問文のコードでは `div` 要素の `src`, `type` 属性へ値を設定しようとしていますが、 **`div` 要素に `src`,
`type` 属性は存在しない**[[1]](https://html.spec.whatwg.org/multipage/grouping-
content.html#the-div-element)ため、正常に画像が表示出来ません。そのため、今回の回答では `div` 要素を `img`
要素に差し替えます。

クリックされた要素と対応する画像の URL は、クリックされた要素の子要素の `src` 属性であるため、 `$("img", $(this))`
として当該 `img` 要素を選択し、 [`attr`
メソッド](https://api.jquery.com/attr/)を使用することで得られます。このリンクを別の要素の `src` 属性へ設定する場合にも
[`attr`
メソッド](https://api.jquery.com/attr/)を使用出来ます。以上を行うと、質問文のコードは以下のようになり、選択した画像が別の要素へ表示されていることがわかります。

[code]

    $(function() {
      $('.dropdown-menu .dropdown-item').click(function() {
        var item = $("img", $(this));
        var src = item.attr("src");
        $("#newImg_boat").attr("src", src);
      });
    });
[/code]

[code]

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    
    <div class="dropdown">
      <button type="button" class="btn btn-primary dropdown-toggle btn-lg" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ヨットのクラスを選択</button>
      <ul class="dropdown-menu">
        <li><button class="dropdown-item" value="laser"><img class="dropdown-img" src="https://placehold.jp/3d4070/ffffff/150x150.png?text=laser.PNG" alt="laser"></button></li>
        <li><button class="dropdown-item" value="laser radial"><img class="dropdown-img" src="https://placehold.jp/3d4070/ffffff/150x150.png?text=laser_radial.PNG" alt="laser_radial"></button></li>
        <li><button class="dropdown-item" value="laser_4.7"><img class="dropdown-img" src="https://placehold.jp/3d4070/ffffff/150x150.png?text=laser_4.7.PNG" alt="laser_4.7"></button></li>
        <li><button class="dropdown-item" value="470"><img class="dropdown-img" src="https://placehold.jp/3d4070/ffffff/150x150.png?text=470.PNG" alt="470"></button></li>
        <li><button class="dropdown-item" value="snipe"><img class="dropdown-img" src="https://placehold.jp/3d4070/ffffff/150x150.png?text=snipe.PNG" alt="snipe"></button></li>
        <li><button class="dropdown-item" value="taser"><img class="dropdown-img" src="https://placehold.jp/3d4070/ffffff/150x150.png?text=taser.PNG" alt="taser"></button></li>
        <li><button class="dropdown-item" value="optimist"><img class="dropdown-img" src="https://placehold.jp/3d4070/ffffff/150x150.png?text=optimist.PNG" alt="optimist"></button></li>
      </ul>
    </div>
    
    <img id="newImg_boat">
[/code]


CC BY-SA 4.0
2019-12-23T11:52:35.613
61707
2019-12-23T11:52:35.613
32986
61701
answer