Question

我有2个div包含一个标签以及我标记如下。我正在使用一个on click函数，它不表示你必须用它来编写函数，使用可以使用点击这个项目得到的东西得到元素和这些元素中找到了放置它的特定类。

<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>

Answer 2

这可能会有所帮助，

var c = element.childNodes; //get element from click event
for (i = 0; i < c.length; i++) {
    console.log(c[i].nodeName) //You will get child tags <i> & <a> 
}

将用户类（其样式以红色显示）添加到c [i] .nodeName

如何在div上点击div而不是标签获取标签的类列表？

2 个答案: