使用 Bootstrap 4 更改下拉菜单中的图像值

Question

我想在下拉值更改时更改图像的值，而不仅仅是文本。我该怎么做？

HTML

<div class="input-group">

    <div class="input-group-btn">

        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">

            <img src="https://i.postimg.cc/44bmkyGL/sdgs-1.jpg"> One

        </button>

        <div class="dropdown-menu">

            <a class="dropdown-item sectionScroll" href="#one"><img src="https://i.postimg.cc/44bmkyGL/sdgs-1.jpg"> One</a>

            <a class="dropdown-item sectionScroll" href="#two"> <img src="https://i.postimg.cc/4NWyy0mp/sdgs-2.jpg"> Two</a>

            <a class="dropdown-item sectionScroll" href="#three"> <img src="https://i.postimg.cc/dVD1y9yp/sdgs-3.jpg"> Three</a>

            <a class="dropdown-item sectionScroll" href="#three"> <img src="https://i.postimg.cc/pdFL0XkB/sdgs-4.jpg"> Four</a>

            <a class="dropdown-item sectionScroll" href="#three"> <img src="https://i.postimg.cc/85gPxQ0g/sdgs-5.jpg"> Five</a>

        </div>

    </div>

</div>

JS：

$(".dropdown-menu a ").click(function(){

  $(this).parents(".input-group-btn").find('.btn').text($(this).text    ());

});

Answer 1

试试这个 usingclosest()方法来找到正确的元素。$(".dropdown-menu a ").click(function() {&nbsp; $image = $(this).find('img').attr("src")&nbsp; $(this).closest('.input-group-btn').find('button img').attr("src", $image);&nbsp; $(this).closest('.input-group-btn').find('button span').text($(this).text());});img {&nbsp; width: 24px;}<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"><div class="input-group">&nbsp; <div class="input-group-btn">&nbsp; &nbsp; <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://i.postimg.cc/44bmkyGL/sdgs-1.jpg"> <span>One</span>&nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; <div class="dropdown-menu">&nbsp; &nbsp; &nbsp; <a class="dropdown-item sectionScroll" href="#one"><img src="https://i.postimg.cc/44bmkyGL/sdgs-1.jpg"> One</a>&nbsp; &nbsp; &nbsp; <a class="dropdown-item sectionScroll" href="#two"> <img src="https://i.postimg.cc/4NWyy0mp/sdgs-2.jpg"> Two</a>&nbsp; &nbsp; &nbsp; <a class="dropdown-item sectionScroll" href="#three"> <img src="https://i.postimg.cc/dVD1y9yp/sdgs-3.jpg"> Three</a>&nbsp; &nbsp; &nbsp; <a class="dropdown-item sectionScroll" href="#three"> <img src="https://i.postimg.cc/pdFL0XkB/sdgs-4.jpg"> Four</a>&nbsp; &nbsp; &nbsp; <a class="dropdown-item sectionScroll" href="#three"> <img src="https://i.postimg.cc/85gPxQ0g/sdgs-5.jpg"> Five</a>&nbsp; &nbsp; </div>&nbsp; </div></div>

Answer 2

你可以试试这个：&nbsp;$(".dropdown-menu a ").click(function(){&nbsp; $image=$(this).children('img').attr("src")&nbsp; $(this).parents(".input-group-btn").find('.btn').children('img').attr("src",$image);$(this).parents(".input-group-btn").find('.btn').text($(this).text()); });