Как запустить функцию, когда пользователь выбрал элемент из элемента ul?

У меня есть этот HTML код:Как запустить функцию, когда пользователь выбрал элемент из элемента ul?

<ul id="cultureMenu" class="top-links list-inline" onselect=""> 
    <li> 
     <a class="dropdown-toggle no-text-underline" data-toggle="dropdown" href="#"><img class="flag-lang" [email protected] width="16" height="11" alt="lang" />@Resources.Resources.Language</a> 
     <ul class="dropdown-langs dropdown-menu"> 
      <li><a value="he" tabindex="-1"><img class="flag-lang" src="~/assets/images/flags/no.png" width="16" height="11" alt="lang" />Norsk</a></li> 
      <li class="divider"></li> 
      <li><a value="en" tabindex="-1"><img class="flag-lang" src="/assets/images/flags/us.png" width="16" height="11" alt="lang" /> ENGLISH</a></li> 
      <li><a value="de" tabindex="-1"><img class="flag-lang" src="/assets/images/flags/de.png" width="16" height="11" alt="lang" /> Deutsch</a></li> 
      <li><a value="ru" tabindex="-1"><img class="flag-lang" src="/assets/images/flags/ru.png" width="16" height="11" alt="lang" /> Русский </a></li> 
     </ul> 
    </li> 
</ul>

мне нужно функцию срабатывать, когда элемент (li), выбранный пользователем.

У меня есть эта реализация на JQuery:

 //function fired when user change culture 
     (function ($) { 
      $('#cultureMenu ul li').click(function() { 
       alert("item selected"); 
      }) 
     })(jQuery);

, но мне нужно, чтобы реализовать его на чистом JavaScript.

Как я могу реализовать выше логику в чистом Javascript?

источник

2017-02-21 Michael

добавить OnClick к элементу в HTML – davidivad

обычно, когда вы начинаете изучать язык программирования вы начинаете с основами не с каркасом Интернет полон примеров – madalinivascu

, что ты устал , какие у вас ошибки? – madalinivascu

Для быстрого решения вы можете использовать onclick для каждого элемента, помните, что для огромного количества элементов это не опция maintanable, и вы должны создать обработчик отдельно.

<ul id="cultureMenu" class="top-links list-inline" onselect=""> 
<li> 
    <a class="dropdown-toggle no-text-underline" data-toggle="dropdown" href="#"><img class="flag-lang" [email protected] width="16" height="11" alt="lang" />@Resources.Resources.Language</a> 
    <ul class="dropdown-langs dropdown-menu"> 
     <li onclick="yourfunction(this)"><a value="he" tabindex="-1"><img class="flag-lang" src="~/assets/images/flags/no.png" width="16" height="11" alt="lang" />Norsk</a></li> 
     <li class="divider"></li> 
     <li onclick="yourfunction(this)"><a value="en" tabindex="-1"><img class="flag-lang" src="/assets/images/flags/us.png" width="16" height="11" alt="lang" /> ENGLISH</a></li> 
     <li onclick="yourfunction(this)"><a value="de" tabindex="-1"><img class="flag-lang" src="/assets/images/flags/de.png" width="16" height="11" alt="lang" /> Deutsch</a></li> 
     <li onclick="yourfunction(this)"><a value="ru" tabindex="-1"><img class="flag-lang" src="/assets/images/flags/ru.png" width="16" height="11" alt="lang" /> Русский </a></li> 
    </ul> 
</li>

затем объявить вашу функцию

function yourfunction(item){ 
    alert(item.querySelector('a').getAttribute('value') + " selected"); 
}

источник

2017-02-21 11:38:40 davidivad

Предлагая встроенный обработчик обратных ссылок назад – Satpal

Конечно, он не масштабируется, это просто быстрое решение для нескольких элементов. Если количество элементов в списке загружается из db или оно больше, не включайте onclick ... – davidivad

Спасибо за сообщение. Любая идея, как я могу получить значение выбранного элемента li в вашей функции()? – Michael

Вы должны связать обработчик события click для каждого li DOM элемента.

Вы можете использовать querySelectorAll, чтобы узнать все li элементов из вашей неупорядоченной list.

var lis=document.querySelectorAll('#cultureMenu ul li'); 
 
for(i=0;i<lis.length;i++){ 
 
    lis[i].onclick=function(){ 
 
    console.log(this.querySelector('a').getAttribute('value')); 
 
    console.log(this.querySelector('a').textContent.trim()); 
 
    } 
 
}

<ul id="cultureMenu" class="top-links list-inline" onselect=""> 
 
    <li> 
 
     <a class="dropdown-toggle no-text-underline" data-toggle="dropdown" href="#"><img class="flag-lang" [email protected] width="16" height="11" alt="lang" />@Resources.Resources.Language</a> 
 
     <ul class="dropdown-langs dropdown-menu"> 
 
      <li><a value="he" tabindex="-1"><img class="flag-lang" src="~/assets/images/flags/no.png" width="16" height="11" alt="lang" />Norsk</a></li> 
 
      <li class="divider"></li> 
 
      <li><a value="en" tabindex="-1"><img class="flag-lang" src="/assets/images/flags/us.png" width="16" height="11" alt="lang" /> ENGLISH</a></li> 
 
      <li><a value="de" tabindex="-1"><img class="flag-lang" src="/assets/images/flags/de.png" width="16" height="11" alt="lang" /> Deutsch</a></li> 
 
      <li><a value="ru" tabindex="-1"><img class="flag-lang" src="/assets/images/flags/ru.png" width="16" height="11" alt="lang" /> Русский </a></li> 
 
     </ul> 
 
    </li> 
 
</ul>

источник

2017-02-21 11:39:02

Спасибо за сообщение. Но мне нужен чистый javascript.And, я вижу, у вас есть ссылка на библиотеку jQuery – Michael

@ Майкл, это была всего лишь ошибка. используй это. –

@ downvoter, объясните пожалуйста. –

Как запустить функцию, когда пользователь выбрал элемент из элемента ul?

ответ

Смежные вопросы