Question

我正在尝试为ul中的所有li元素添加一个事件监听器。我目前有代码用于第一个列表项作为证明，但我不知道如何将其扩展到整个列表。我已经尝试了几个像delegate（），on（）和each（）但我一直空着的东西。任何帮助或建议将不胜感激

(function() {
    var $body = document.body
    , $menu_trigger = $body.getElementsByClassName('menu-trigger')[0]
  , $menu_list_item = $body.getElementsByClassName('menu-list-item')[0];
// , $menu_list_items = $body.getElementsByClassName('menu-list-items');

    if ( typeof $menu_list_item !== 'undefined' ) {
        $menu_list_item.addEventListener('click', function() {
            $body.className = ( $body.className == 'menu-active' )? '' : 'menu-active';
        });
    }

    if ( typeof $menu_trigger !== 'undefined' ) {
        $menu_trigger.addEventListener('click', function() {
            $body.className = ( $body.className == 'menu-active' )? '' : 'menu-active';
        });
    }

}).call(this);

Answer 1

如果你正在使用jQuery，那么你可以使用选择器将click事件添加到多个项目中。

像

这样的东西

$('.eventClass').on('click', function() {
  doSomething();
});

它将被应用于具有类＆＃34; eventClass的任何元素。＆＃34;如果那些更好，你可以使用其他CSS selectors。

如果您想要纯粹的javascript，请使用document.getElementsByClassName()。

Answer 2

＆＃13;

//wait dom to load
$(document).ready(function(){
   $('ul > li').click(function(){
     alert($(this).html());
   });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <ul>
    
    <li> A </li>   
        <li> B </li>   
        <li> C </li>   
      
  </ul>
  
  <div>
    <!-- example of nested -->
    <ul>
       <li> G </li>   
        <li> D </li>   
        <li> F </li>   
      
    </ul>
   
   </div>
 </body>

＆＃13;

点击任何:)使用jquery你必须指定目标元素的css selctor：）

Answer 3

所以我明白了。无论出于何种原因，它都不适用于ul元素类定义，但只要我将变量更改为导航包装类定义，我就获得了成功。这是最终的工作代码。

(function() {
    var $body = document.body
  , $menu_trigger = $body.getElementsByClassName('menu-trigger')[0]
  , $menu_list_items = document.getElementById('slide-menu');


  $menu_list_items.addEventListener('click', function(e) {
      if (e.target.tagName === 'LI'){
        $body.className = ( $body.className == 'menu-active' )? '' : 'menu-active';

      }
  });

    if ( typeof $menu_trigger !== 'undefined' ) {
        $menu_trigger.addEventListener('click', function() {
            $body.className = ( $body.className == 'menu-active' )? '' : 'menu-active';
        });
    }

}).call(this);



   <!-- Navigation -->
    <nav id="slide-menu">
        <ul class="menu-list-items">
            <li class="d-label">Children</li>
            <li class="d-label">Vehicles</li>
            <li class="d-label">Travel Expense</li>
            <li class="d-label">Lodging</li>
            <li class="d-label">Dining</li>
        </ul>
    </nav>

<!-- Content panel -->
<div id="content">
    <div class="menu-trigger"></div>
    <h1>Proof of concept for menu closure on item click</h1>
    <p>Lorem ipsum dolor sit amet, ex facer assueverit sadipscing cum. Per at error diceret impedit. Te pro wisi scribentur, senserit urbanitas vix eu, viderer discere an vel. Sed unum lobortis suavitate eu, ad nec utroque aliquando.</p>
</div>

将Click Event Listener扩展为所有列表项

3 个答案: