Question

下面我想点击时改变在按钮下拉图像。当我尝试点击它的下拉图像交换和替换他下拉图像与实际。这是小提琴https://jsfiddle.net/320cxwo1/

<div class="btn-toolbar fixed-bottom" style="justify-content: center; display: flex;" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group mr-2" role="group" aria-label="First group">
        <button type="button" class="btn btn-secondary">
            <img src="https://image.flaticon.com/icons/svg/1391/1391667.svg" style="cursor:pointer" class="img-border"
                width="37px" height="37px">
        </button>
        <button type="button" class="btn btn-secondary">
            <img src="https://image.flaticon.com/icons/svg/1391/1391667.svg" class="img-border" style="cursor:pointer"
                width="37px" height="37px">
        </button>
        <button type="button" class="btn btn-secondary">
            <img src="https://image.flaticon.com/icons/svg/1391/1391667.svg" class="img-border" style="cursor:pointer"
                width="37px" height="37px">
        </button>
        <button type="button" class="btn btn-secondary">
            <img src="https://image.flaticon.com/icons/svg/1391/1391667.svg" class="img-border" style="cursor:pointer"
                width="37px" height="37px">
        </button>
    </div>

    <div class="btn-group" role="group" aria-label="Third group">
        <button type="button" class="btn btn-secondary">
            <img src="https://image.flaticon.com/icons/svg/1391/1391667.svg" class="img-border" style="cursor:pointer"
                width="37px" height="37px">
        </button>
        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
            <img src="https://image.flaticon.com/icons/svg/1391/1391667.svg" class="img-border" style="cursor:pointer"
                width="37px" height="37px">
            <ul class="dropdown-menu">
                <li><a href="#"> <img src="https://image.flaticon.com/icons/svg/1391/1391669.svg" class="img-border"
                            style="cursor:pointer" width="37px" height="37px"></a></li>
                <li><a href="#"> <img src="https://image.flaticon.com/icons/svg/1391/1391668.svg" class="img-border"
                            style="cursor:pointer" width="37px" height="37px"></a></li>
                <li><a href="#"> <img src="https://image.flaticon.com/icons/svg/1391/1391661.svg" class="img-border"
                            style="cursor:pointer" width="37px" height="37px"></a></li>
            </ul>
        </button>

    </div>
</div>
.btn-toolbar{
  text-align:center;
}
.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show>.btn-secondary.dropdown-toggle {
background-color:  #db9c31;
  border-color: #db9c31;
  color:#db9c31;
}

Answer 1

仅JS：https://jsfiddle.net/Lonce68v/
jQuery：https://jsfiddle.net/u7ockf80/

JS（香草）：

let dropDowmMenuLink = document.querySelectorAll('button.dropdown-toggle ul.dropdown-menu li');
for(let i = 0; i < dropDowmMenuLink.length; i++){
    dropDowmMenuLink[i].addEventListener('click', function(){
       var src = this.querySelector('a img').src;
       this.parentNode.parentNode.querySelector('img').src = src;
    });
}

使用jQuery：

$('button.dropdown-toggle ul.dropdown-menu li').on('click', function(){
    var src = $(this).find('a img').attr('src');
    $(this).parent().siblings('img').attr('src', src);
});

更改下拉图像并在单击时替换按钮

1 个答案: