javascript - 如何在 JavaScript 中无需任何内联函数调用即可获取点击时的元素 id？

Question

我需要将点击的元素的类更改为“选定”这是我的 html 文件的一部分:

<div class="side-nav white-nav" id="sidenavblade">
 <ul>
      <span id="trigger-1" class="menu-trigger"><li>
        <a href="<?php echo URL::to('/')."/initiatives" ?>" class="">
          <span id="trigger-1" class="menu-trigger" >INITIATIVES <i class="icon initiatives"></i>
        </a>
      </li></span>....

“side-nav”类中还有 10 个“li”我需要将单击的“a”元素的图标类别更改为“选定”。我的js:

var select=false;
t=document.getElementById('sidenavblade');
e=t.getElementsByTagName('a');

$(e).click(function(){
  if(select==true){
     $('.selected').removeClass('selected');
  }
  $(this).getElementsByClassName('icon ').addClass('selected');
  select=true;
});

但是，“this”结果是“未定义”。如何更改我的函数以获取单击的元素，而不需要单独调用每个元素的函数。

Answer 1

您无缘无故地混合了 jQuery 和 native DOM 调用。这根本行不通:

 $(this).getElementsByClassName('icon ').addClass('selected');

但是，使用库很容易:

 $(this).find('.icon').addClass('selected');

DOM API 返回一个 NodeList，您不能像 jQuery 对象一样使用它。

同样:

e=t.getElementsByTagName('a');

$(e)

可能有效，但我不确定；当然，直接写更简单

$('a').click(function() {
  // ...