Javascript 如何在代码中切换类，我做错了什么？

我有如下CSHTML代码。我需要在单击时切换一个类，这在下面的Javascript代码中给出

 <div class="accordion bar-heading-padding" id="#accordion2" onclick="getclassofitag(this)">
      <div class="accordion-group">
          <div class="accordion-heading datalist" data-toggle="collapse" data-parent="#accordion2" href="#@i.Id">
               @*<i class="fa fa-chevron-up table-middle icon-width" aria-hidden="false"></i>*@
                <i class="fa fa-chevron-down table-middle icon-width" aria-hidden="true"></i>

               <h1 class="accordion-toggle table-middle">
                  @Html.Raw(@i.Name)
               </h1>
          </div>
          <div id="@i.Id" class=" collapse out">
               <div class="accordion-inner">
                    <img ng-src="@i.ImagePath" alt="logo" class="img-thumbnail img-wrap content-image" />
                    <h1>@Html.Raw(@i.Name)</h1>
                    <h3>@Html.Raw(@i.Title)</h3>
                    <br />
                    @Html.Raw(@i.BioDetail)
              </div>
         </div>
     </div>
 </div>

---

我想切换

I

元素的类（

document.getElementsByTagName（）

返回一个包含DOM对象集合的HTMLCollection对象。集合本身没有

.classList

属性（就像您正在尝试的那样）。这是DOM元素的属性，而不是集合对象。因此，

iTags

变量上没有.classList`属性

因此，您需要迭代

iTags

HTMLCollection，并在每个DOM元素上使用

.classList

function getclassofitag(element) {
    var item, iTags = element.getElementsByTagName("i");
    for (var i = 0; i < iTags.length; i++) {
        item = iTags[i];
        item.classList.toggle('fa-chevron-down');
        item.classList.toggle('fa-chevron-up');
    }
}

函数getclassofitag（元素）{ 变量项，iTags=element.getElementsByTagName（“i”）； 对于（变量i=0；i

---

注意：我还将您的iTags变量声明为局部变量，这样您就不会使用隐式全局变量（这是一种糟糕的做法）。

希望这能解决您的问题

  $(document).ready(function () {
    $('.collapse').on('shown.bs.collapse', function () {
        $(this).parent().find(".fa-chevron-down").removeClass("fa-chevron-down").addClass("fa-chevron-up");
    });

    $('.collapse').on('hidden.bs.collapse', function () {
        $(this).parent().find(".fa-chevron-up").removeClass("fa-chevron-up").addClass("fa-chevron-down");
    });
});

---

调试提示：如果您使用浏览器的调试工具（或使用console.log），您可能会看到

iTags

类似于数组。

  $(document).ready(function () {
    $('.collapse').on('shown.bs.collapse', function () {
        $(this).parent().find(".fa-chevron-down").removeClass("fa-chevron-down").addClass("fa-chevron-up");
    });

    $('.collapse').on('hidden.bs.collapse', function () {
        $(this).parent().find(".fa-chevron-up").removeClass("fa-chevron-up").addClass("fa-chevron-down");
    });
});