javascript - 单击子项时如何更改(添加或删除) 子项内的类

Question

我正在制作简单的应用程序，基本上我正在学习 JavaScript、jQuery、HTMl 等 Web 技术。所以我创建了简单的仪表板，它看起来像这样:

正如你们看到的，当我点击一个类别时，向下的箭头应该在点击类别时指向上方，我看到这是关于这个类的:

fa-angle-down

所以基本上当单击类别时我应该删除一个类并添加一个名为:

fa-angle-up

但我不知道如何通过一次编写代码并将其应用于页面上所有行为如此的元素来实现这一点，请任何类型的帮助都很棒，并解释一下为什么会这样......

这是我的 HTML:

   <ul class="nav navbar-nav side-nav">
            <li>
                <a href="#" data-toggle="collapse" data-target="#submenu-1"><i class="far fa-clipboard"></i> <span class="menu-item-text">TEST</span><i class="fas fa-angle-down fa-fw pull-right"></i></a>
                <ul id="submenu-1" class="collapse">
                    <li><a href="#"><i class="fa fa-angle-double-right"></i> SUBMENU 1.1</a></li>
                    <li><a href="#"><i class="fa fa-angle-double-right"></i> SUBMENU 1.2</a></li>
                    <li><a href="#"><i class="fa fa-angle-double-right"></i> SUBMENU 1.3</a></li>
                </ul>
            </li>
            <li>
                <a href="#" data-toggle="collapse" data-target="#submenu-2"><i class="far fa-folder-open"></i> <span class="menu-item-text">TEST 2</span><i class="fas fa-angle-down fa-fw pull-right"></i></a>
                <ul id="submenu-2" class="collapse">
                    <li><a href="#"><i class="fa fa-angle-double-right"></i> SUBMENU 2.1</a></li>
                    <li><a href="#"><i class="fa fa-angle-double-right"></i> SUBMENU 2.2</a></li>
                    <li><a href="#"><i class="fa fa-angle-double-right"></i> SUBMENU 2.3</a></li>
                </ul>
            </li>
            <li>
                <a href="investigaciones/favoritas"><i class="fas fa-shopping-cart"></i> <span class="menu-item-text">TEST 3</span></a>
            </li>
            <li>
                <a href="sugerencias"><i class="fas fa-cogs"></i> <span class="menu-item-text">TEST 4</span></a>
            </li>

        </ul>

</nav>

   <script>
        $('#submenu-1 > ul > li').on('click',function(event){alert('Does this trigger?');});
    </script>

正如你们所看到的，这里有很少的 javaScript 代码:

 <script>
        $('#submenu-1 > ul > li').on('click',function(event){alert('Does this trigger?');});
    </script>

可能会注意到，我尝试将事件处理程序附加到 li，它是 ul 的一部分，位于 id 为 的元素中#submenu-1

但不幸的是，这行不通:(

Answer 1

正如我在评论中提到的，我强烈推荐阅读 Decoupling Your HTML, CSS, and JavaScript .

首先使用一些 js-* 类标签更改您的 html，然后使用一些简单的 jquery。您可以忽略样式，这些只是为了示例。

js-angles 是容器，其中只有一个元素可以up。 js-angle 是包含 1 个或多个项的元素，当它 (js-angle) 被点击时需要从下变为上。

$(document).ready(() => {
  $('.js-angles .js-angle').on('click', 
    // This is an arrow function so there is no "this"
    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
    // we can easily replace "this" with "e.currentTarget" 
    // https://api.jquery.com/category/events/event-object/
    (e) => {
    var $this = $(e.currentTarget);
    // $container "contains" everything we want to track/change
    var $container = $this.closest('.js-angles');
    // find anything in the container that currently has up and toggle it with down
    $container.find('.fa-angle-up').toggleClass('fa-angle-up fa-angle-down'); 
    // find the down within the element we clicked and toggle up/down
    $this.find('.fa-angle-down').toggleClass('fa-angle-up fa-angle-down');  
  });
});

a { text-docoration: none }
li { width: 120px; }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav side-nav js-angles">
  <li>
    <a href="#" data-toggle="collapse" data-target="#submenu-1" class="js-angle">
      <i class="far fa fa-clipboard"></i>
      <span class="menu-item-text">TEST</span>
      <i class="fas fa fa-angle-down fa-fw pull-right"></i>
    </a>
    <ul id="submenu-1" class="collapse">
      <li><a href="#"><i class="fa fa-angle-double-right"></i> SUBMENU 1.1</a></li>
      <li><a href="#"><i class="fa fa-angle-double-right"></i> SUBMENU 1.2</a></li>
      <li><a href="#"><i class="fa fa-angle-double-right"></i> SUBMENU 1.3</a></li>
    </ul>
  </li>
  <li>
    <a href="#" data-toggle="collapse" data-target="#submenu-2" class="js-angle">
      <i class="far fa fa-folder-open"></i>
      <span class="menu-item-text">TEST 2</span>
      <i class="fas fa fa-angle-down fa-fw pull-right"></i>
    </a>
    <ul id="submenu-2" class="collapse">
      <li><a href="#"><i class="fa fa-angle-double-right"></i> SUBMENU 2.1</a></li>
      <li><a href="#"><i class="fa fa-angle-double-right"></i> SUBMENU 2.2</a></li>
      <li><a href="#"><i class="fa fa-angle-double-right"></i> SUBMENU 2.3</a></li>
    </ul>
  </li>
</ul>