Question

我有这个Html代码：

<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" src=@flag 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中实现上述逻辑？

Answer 1

对于快速解决方案，您可以对每个元素使用onclick，请记住，对于大量元素，这不是一个maintanable选项，您应该创建处理程序。

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

然后声明你的功能

css transition

Answer 2

您应该为每个click DOM元素绑定一个li事件处理程序。

您可以使用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" src=@flag 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>

当用户从ul元素中选择项目时如何触发功能？

2 个答案: