Привязка к нажатой ссылке

212

17 сентября 2017, 00:42

У меня есть динамическое формирование списка с ссылками:

 <ul class="uk-navbar-nav" id="navigation-links">
    <? foreach ($arResult["SECTIONS"] as $key => $value): ?>
        <li><a href="javascript:void(0)" id="<?= $key ?>" class="menu-links"><?= $value ?></a></li>
    <? endforeach; ?>
</ul>

Также есть обработчик клика по ссылке:

$('#navigation-links a').on("click", function () {
     var sectionId = $(this).attr("id");
     if(sectionId == 10270) {
        //do something
     }
});

Проблема в том, что сейчас у меня жестко забит id (10270) в условии. НО это не верно, он может поменяться при формировании списка и все перестанет работать. Возможно ли каким-то образом еще привязаться к нажатой ссылке?

Answer 1

Попробуйте таким образом. Тут при клике на любую ссылку сначала получаете id самой ссылки и объект, в котором хранятся вообще все id имеющихся в списке ссылок. Ну а дальше по сравнению выполняете нужный вам код. При этом айдишники будут обновляться при каждом клике на любую ссылку из списка.

$('#navigation-links').on('click', 'a', function() { 
     
   var sectionId = $(this).attr("id"), 
       listId= {}; 
        
       $('li').each(function (idx, item) { 
        
             listId[idx] = $('a', item).attr("id") 
       }); 
    
   for (key in listId) { 
    
    if (listId[key] == sectionId) { 
     
      console.log('Открыть ссылку с id: ' + sectionId, 
      '...А вот и  ключ: ' + listId[key]); 
     
    } 
    
   } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="uk-navbar-nav" id="navigation-links"> 
<li><a id='5' href='#' class="menu-links">1</a></li> 
<li><a id='some-id' href='#' class="menu-links">2</a></li> 
<li><a id='3' href='#' class="menu-links">[jred</a></li> 
<li><a id='345345' href='#' class="menu-links">123331231</a></li> 
<li><a id='44334' href='#' class="menu-links">1</a></li> 
</ul>