Question

我有一个如下的cshtml。我需要在click上切换一些类，这在下面的java脚本中给出。

 <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标记类的java脚本。

function getclassofitag(element) {
    iTags = element.getElementsByTagName("i");
    iTags.classList.toggle('fa-chevron-down');
    itags.classList.toggle('fa-chevron-up');
}

我想切换i标签的类（

Answer 1

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');
    }
}

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

Answer 2

希望这能解决您的问题

  $(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");
    });
});

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

2 个答案: