首頁猿問使用 Bootstrap 4...

使用 Bootstrap 4 更改下拉菜單中的圖像值

JavaScript

慕蓋茨4494581 2021-11-18 15:52:03

我想在下拉值更改時更改圖像的值，而不僅僅是文本。我該怎么做？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 ());});

查看完整描述

2 回答

肥皂起泡泡

TA貢獻1829條經驗獲得超6個贊

試試這個 usingclosest()方法來找到正確的元素。

$(".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;

}

</button>

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

</div>

反對回復 2021-11-18

慕少森

TA貢獻2019條經驗獲得超9個贊

你可以試試這個：

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

$image=$(this).children('img').attr("src")

$(this).parents(".input-group-btn").find('.btn').children('img').attr("src",$image);

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

反對回復 2021-11-18

2 回答
0 關注
192 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

使用 Bootstrap 4 更改下拉菜單中的圖像值

使用 Bootstrap 4 更改下拉菜單中的圖像值

2 回答

添加回答