Question

我想使用引导程序下拉菜单显示选定的菜单选项。

我能够选择第一个菜单选项，并将其应用于引导程序下拉btn。

但是，第一次单击后，我无法更改所选的菜单选项。

我很确定使用attr（）是问题所在。

所以，我使用了each（），但也没有用。

            <ul> 
                <li>.....</li>
                <li>.....</li>
                <li>.....</li>
                <li>
                  <div class="dropdown">
                  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <img height="25" src="img/flag_english.png" id="selected">
                  </button>
                  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <a class="dropdown-item"><img value="jp" height="25" src="img/flag_japanese.png" class="language"></a>
                    <a class="dropdown-item"><img value="en" height="25" src="img/flag_english.png" class="language"></a>
                  </div>
                  </div>
                <li>
            </ul>

以下代码适用于第一个选项<a class="dropdown-item"><img value="jp" height="25" src="img/flag_japanese.png" class="language"></a>

 $('.dropdown-menu a img').on('click', ()=>{
  let flag = $('.language').attr('src');
  console.log(flag);
  $('#selected').attr('src', flag);
})

我也尝试使用each（）

  $('.dropdown-menu a img').on('click', ()=>{
  $('.language').each(()=>{
    let flag = $('.language').attr('src');
  })
})

但这也不起作用。如何改善我的代码？还是应该使用其他方法？

Answer 1

您的语法错误，应该是

 $('.dropdown-menu a img').on('click', function(){
     let flag = $(this).attr('src');
     console.log(flag);
     $('#selected').attr('src', flag);
 })

在boostrap下拉菜单上显示所选菜单[仅适用于第一个菜单选项并使用attr（）]

1 个答案: