ul/liリスト内のすべての属性メニュー項目を無効にするには？

Question

Photos1、Photos2、Photos3、Photos4のメニューをすばやくクリックすることができ、 "$ .get（..."はサーバーに4回送信されます。いずれかをクリックするとこれらのメニューをすべて無効にする必要があります。環境：NodeJS、エクスプレス、パグ、jQueryのおかげで、パット

--------------DOM---------------------------------- 
// file = photos.pug 
div#wrapper2 
    div#altnav 
     ul 
     include includes/altnav.pug 
     include includes/navjs.pug 
--------------------------------------------------- 
// file = includes/altnav.pug 
li: a.navigation(href='#', data-level='/images/cs/Photos1') Photos1 
li: a.navigation(href='#', data-level='/images/cs/Photos2') Photos2 
li: a.navigation(href='#', data-level='/images/cs/Photos3') Photos3 
li: a.navigation(href='#', data-level='/images/cs/Photos4') Photos4 
--------------------------------------------------- 
// file = includes/navjs.pug 
script. 
    $(function(){ // jQuery DOM ready 
     $('.navigation').click(function() { 

      $(this).css({ // Disable this menu item 
       "pointer-events": "none", 
       "cursor": "default" 
      }); 
// ??????? I NEED TO DISABLE ALL Menus in this List ??????? 
      var level = 'm' + $(this).data('level');  // Append an 'm' so I know this came from navjs.pug 
      var url = '/navigation?level=' + escape(level); // Send this to the /router/photos.js 
      $.get(url, function (data) { 
       $('body').html(data);   // data = new HTML page to be loaded by browser 
      }); 
     }); 
    }); 

Answer 1

これ以上クリックしないとクリックイベントに応答する必要があるためイベントの委任を使用する方がよいでしょう。 囲みulタグにわかりやすいクラス名 "navigation-menu"を与えて、セレクタがすべてのulタグを対象としないようにすることをお勧めします。

$(function(){ // jQuery DOM ready  
 
    var navigationMenu = $("ul.navigation-menu"); 
 
    navigationMenu.on("click", "a", disableLinks); 
 
    function disableLinks(e) { 
 
     navigationMenu.find('a.navigation').css({ 
 
     "pointer-events": "none", 
 
     "cursor": "default", 
 
     "color": "#aaa" 
 
     }); 
 
     e.stopPropagation(); 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<ul class="navigation-menu"> 
 
    <li><a class="navigation" href="#link1" >link1</a></li> 
 
    <li><a class="navigation" href="#link2" >link2</a></li> 
 
    <li><a class="navigation" href="#link3" >link3</a></li> 
 
</ul>

Answer 2

私は.navigationでのすべての要素にid属性を適用し、関数に$（この）のIDを渡し、関数を記述しますそのIDと一致しない他のすべてのメニュー項目を無効にします。

function disableAllBut(id) { 
    $(.navigation).prop('disable', true); 
    $(id).prop('disable', false); 
}