Javascript / jQuery - 如何获取clicked元素类的名称？

Question

我用Google搜索并用谷歌搜索，我得出的结论是，我自己很难得到答案。

我正在尝试使用jquery或JavaScript来获取clicked元素的属性。我可以使用“this.hash”作为例子 - 它返回我认为的哈希值。

现在我想获得clicked元素类的名称。它甚至可能吗？怎么样？我在哪里可以找到这种信息？

• jQuery文档？ - 所有我能找到的方法和插件，没有属性..如果它在那里 - 请提供链接。
• JavaScript文档？ - 还有一个全面的吗？再请一个链接。
• DOM文档？ - W3C或其中的一个（链接赞赏）。

什么是this.hash？ - DOM JavaScript还是jQuery？

Answer 1

在jQuery中，如果你将click事件附加到所有<div>标签（例如），你可以像这样得到它的类：

示例：http://jsfiddle.net/wpNST/

$('div').click(function() {
    var theClass = this.className;  // "this" is the element clicked
    alert( theClass );
});

这使用jQuery's .click(fn) method来分配处理程序，但直接从单击的DOM元素访问className属性，该元素由this表示。

还有jQuery方法也可以这样做，like .attr()。

示例：http://jsfiddle.net/wpNST/1/

$('div').click(function() {
    var theClass = $(this).attr('class');
    alert( theClass );
});

在这里，我用一个jQuery对象包装DOM元素，以便它可以使用jQuery提供的方法。 The .attr() method在这里得到了设定的类。

Answer 2

此示例将适用于页面中的每个元素。我建议使用console.log(event)，并使用Firebug / Developer工具将其转储到您的控制台中。

jQuery的

​$(window).click(function(e) {
    console.log(e); // then e.srcElement.className has the class
});​​​​

使用Javascript

window.onclick = function(e) {
    console.log(e); // then e.srcElement.className has the class
}​

试试看

http://jsfiddle.net/M2Wvp/

编辑 为了澄清，您不必为e.srcElement.className记录控制台以获得该类，希望这不会让任何人感到困惑。它意味着在函数中显示将具有类名。

Answer 3

$(document).click(function(e){
    var clickElement = e.target;  // get the dom element clicked.
    var elementClassName = e.target.className;  // get the classname of the element clicked
});

这支持单击页面的任何位置。如果您单击的元素没有类名，则返回null或空字符串。

Answer 4

$('#ele').click(function() {
    alert($(this).attr('class'));
});

以下是所有属性函数。

http://api.jquery.com/category/attributes/

Answer 5

你可以使用element.className.split（/ \ s + /）;为了获得一个类名数组，请记住元素可以有多个类。

然后你可以迭代所有这些并找到你想要的那个。

window.onclick = function(e) {
    var classList = e.srcElement.className.split(/\s+/);
    for (i = 0; i < classList.length; i++) {
       if (classList[i] === 'someClass') {
         //do something
       }
    }
}

jQuery在这里并没有真正帮助你，但如果你必须的话

$(document).click(function(){
    var classList =$(this).attr('class').split(/\s+/);
    $.each( classList, function(index, item){
        if (item==='someClass') {
           //do something
        }
    });
});

Answer 6

没有编码就有办法做到这一点。只需打开浏览器的控制台（f12？）并转到所需的元素即可。之后，悬停或单击要跟踪的项目。

在DOM上进行的每个更改都将在控制台上标记（或点亮）作为另一种颜色的几秒钟。 （观看屏幕截图）

在该示例中，每次我悬停“colorItem”时，'div'父级和“colorItem”类都会变亮。所以在这种情况下，点击的类将是'swiper-model-watch'或'swiper-container'（减轻div的类）