javascript - 如何在单击 div 而不是标签时获取 div 内标签的类列表？

Question

这个问题已经有答案了:

Javascript click function (4 个回答)

已关闭 7 年前。

我有 2 个 div 包含一个标签，并且我的标签如下。我正在使用点击功能，但这并不表示您必须使用它编写该功能，使用可以使用类似点击此项目 get 的功能元素并在这些元素中找到放置它的特定类。

<div class="div" onclick="getclassofitag()">
  <a class="atag"></a>
  <i class="itag1 itag2"></i>
</div>
<div onclick="getclassofitag()">
  <a class="atag"></a>
  <i class="itag11 itag22"></i>
</div>

我需要获取我单击的 div 内的标签的类列表。在cshtml中，您可以使用foreach循环div，在这种情况下重复的div将具有相同的id，相同的类名。那么我如何才能获得我点击的元素呢？如何使用纯 JavaScript 来做到这一点？

我真正拥有的代码是

       @foreach (var j in footerPage.StaticPageFiles)
                            {
                                if (j.Type != "video")
                                {
                                    <div class="col-sm-4 files">
                                        <i class="fa fa-file " aria-hidden="true"></i><a href="@j.FilePath">@j.FileName</a>
                                    </div>
                                }

                            }

它将显示一个高度为 50px、宽度为 100%、颜色为红色的 div。单击每个 div 时，我只想为我单击的 div 应用一些类。

Answer 1

使用 classList 属性将为您提供标签中的类列表:

<div class="div" onclick="getclassofitag(this)">Test1
  <a class="atag"></a>
  <i class="itag1 itag2"></i>
</div>
<div onclick="getclassofitag(this)">Test2
  <a class="atag"></a>
  <i class="itag11 itag22"></i>
</div>

<script type="text/javascript"> 
function getclassofitag(element) {
    aTags = element.getElementsByTagName("a");
    aTagsClass = [];
    for(var i=0; i<aTags.length; i++) {
        for(var j=0; j<aTags[i].classList.length; j++) {
            aTagsClass.push(aTags[i].classList[j]);
        }
    }


    iTags = element.getElementsByTagName("i");
    iTagsClass = [];
    for(var i=0; i<iTags.length; i++) {
        for(var j=0; j<iTags[i].classList.length; j++) {
            iTagsClass.push(iTags[i].classList[j]);
        }
    }
    //This will give you the array of classes in `a` tag and `i` tag
    console.dir(aTagsClass);
    console.dir(iTagsClass);
}
</script>