отображение выбранного меню в выпадающем меню boostrap [относится только к первой опции меню и использованию attr ()]

Question

Я хочу отобразить выбранную опцию меню, используя раскрывающийся список начальной загрузки.

Мне удалось выбрать первый пункт меню и применить его к раскрывающемуся выпадающему меню.

Однако я не могу изменить выбранный пункт меню после первого щелчка.

Я был почти уверен, что проблема с использованием attr ().

Итак, я использовал каждый (), но тоже не работал.

            <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);
})

Я также пытался использовать каждый ()

  $('.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);
 })