Javascript/jQuery - 如何获取被点击元素的类的名称？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3774699/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript/jQuery - How do I obtain name of the class of clicked element?
提问by zwolin
I googled and googled and I concluded that it's very hard to get answer on my own.
我在谷歌上搜索和搜索，我得出的结论是，我自己很难得到答案。
I am trying to use jquery or JavaScript to get a property of clicked element. I can use "this.hash" for example - it returns hash value I presume.
我正在尝试使用 jquery 或 JavaScript 来获取单击元素的属性。例如，我可以使用“this.hash” - 它返回我假设的哈希值。
Now I would like to get name of the class of clicked element. Is it even possible? How? And where would I find this kind of information?
现在我想获取被点击元素的类的名称。甚至有可能吗？如何？我在哪里可以找到此类信息？
jQuery documentation? - All I can find is methods and plugins, no properties.. if its there - please provide me with link.
JavaScript documentation? - is there even one comprehensive one? again please a link.
DOM documentation? - the one on W3C or where (link appreciated).
jQuery 文档？- 我能找到的只有方法和插件，没有属性.. 如果有的话 - 请给我提供链接。
JavaScript 文档？- 甚至有一个全面的吗？再次请一个链接。
DOM 文档？- W3C 上的那个或在哪里（链接赞赏）。
And what is this.hash? - DOM JavaScript or jQuery?
什么是this.hash？- DOM JavaScript 还是 jQuery？
采纳答案by user113716
In jQuery, if you attach a clickevent to all <div>tags (for example), you can get it's class like this:
在 jQuery 中，如果您将一个click事件附加到所有<div>标签（例如），您可以获得它的类，如下所示：
Example:http://jsfiddle.net/wpNST/
示例：http : //jsfiddle.net/wpNST/
$('div').click(function() {
var theClass = this.className; // "this" is the element clicked
alert( theClass );
});
This uses jQuery's .click(fn)methodto assign the handler, but access the classNameproperty directly from the DOM element that was clicked, which is represented by this.
这使用jQuery 的.click(fn)方法来分配处理程序，但className直接从被单击的 DOM 元素访问该属性，该元素由this.
There are jQuery methods that do this as well, like .attr().
也有 jQuery 方法可以做到这一点，例如.attr().
Example:http://jsfiddle.net/wpNST/1/
示例：http : //jsfiddle.net/wpNST/1/
$('div').click(function() {
var theClass = $(this).attr('class');
alert( theClass );
});
Here I wrapped the DOM element with a jQuery object so that it can use the methods made available by jQuery. The .attr()methodhere gets the class that was set.
在这里，我用一个 jQuery 对象包装了 DOM 元素，以便它可以使用 jQuery 提供的方法。这里的.attr()方法获取设置的类。
回答by Robert
This example will work on every element in the page. I'd recommend using console.log(event)and poking around at what it dumps into your console with Firebug/Developer tools.
此示例将适用于页面中的每个元素。我建议使用console.log(event)Firebug/Developer 工具使用并查看它转储到您的控制台中的内容。
jQuery
jQuery
?$(window).click(function(e) {
console.log(e); // then e.srcElement.className has the class
});????
Javascript
Javascript
window.onclick = function(e) {
console.log(e); // then e.srcElement.className has the class
}?
Try it out
试试看
Edit
For clarification, you don't have to log console for the e.srcElement.classNameto have the class, hopefully that doesn't confuse anyone. It's meant to show that within the function, that will have the class name.
编辑
为了澄清起见，您不必登录控制台e.srcElement.className即可拥有该课程，希望这不会让任何人感到困惑。这意味着在函数中，它将具有类名。
回答by rob waminal
$(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
});
this supports on clicking anywhere of the page. if the element you clicked doesn't have a class name, it will return null or empty string.
这支持点击页面的任何地方。如果您单击的元素没有类名，它将返回 null 或空字符串。
回答by redsquare
You can use element.className.split(/\s+/); to get you an array of class names, remember elements can have more than one class.
您可以使用 element.className.split(/\s+/); 为了给你一个类名数组，记住元素可以有多个类。
Then you can iterate all of them and find the one you want.
然后你可以迭代所有这些并找到你想要的。
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 does not really help you here but if you must
jQuery 在这里并没有真正帮助你，但如果你必须
$(document).click(function(){
var classList =$(this).attr('class').split(/\s+/);
$.each( classList, function(index, item){
if (item==='someClass') {
//do something
}
});
});
回答by Metropolis
$('#ele').click(function() {
alert($(this).attr('class'));
});
And here are all of the attribute functions.
这里是所有的属性函数。
回答by gtamborero
There's a way to do this without coding. Just open the console of your browser (f12?) and go to element you want. After that, hover or click the item you want to track.
有一种无需编码即可完成此操作的方法。只需打开浏览器的控制台 (f12?) 并转到您想要的元素。之后，悬停或单击要跟踪的项目。
Every change done on the DOM will be for a few seconds marked (or lightened) as another color on the console. (Watch the screen capture)
在 DOM 上所做的每个更改都会在几秒钟内在控制台上标记（或变亮）为另一种颜色。（观看屏幕截图）
On the example, each time I hover a "colorItem", the 'div' parent and the "colorItem" class appears lightened. So in this case the clicked class will be 'swiper-model-watch' or 'swiper-container' (class of the lightened div)
在示例中，每次我将鼠标悬停在“colorItem”上时，“div”父级和“colorItem”类都会变亮。所以在这种情况下，被点击的类将是 'swiper-model-watch' 或 'swiper-container'（点亮 div 的类）
