javascript - 使用 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

尝试使用 closest() 方法找到正确的元素。

$(".dropdown-menu a ").click(function() {
  $image = $(this).find('img').attr("src")
  $(this).closest('.input-group-btn').find('button img').attr("src", $image);
  $(this).closest('.input-group-btn').find('button span').text($(this).text());
});

img {
  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">
  <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"> <span>One</span>
        </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>