Javascript 获取触发事件的类名

我有一个带有以下HTML的标记：

我正在使用3个按钮的通用单击处理程序，该处理程序具有类

创建\ u帐户

，

成员\ u登录

，

产品\ u服务

现在在处理程序中，我希望以最好的方式（以最小的条件）获得触发单击事件的类名

---

好吧，要夺回曼尼什·詹吉尔。。。。例如，如果您必须只检索相关的类，那么为什么不测试它呢？您使用jquery是为了使用“hasClass”，不是吗

$('.create_account , .member_login , .product_services').click(function(e){
    if($(this).hasClass('create_account')){
        alert('create_account');
    }
    if($(this).hasClass('member_login')){
        alert('member_login');
    }
    if($(this).hasClass('product_services')){
        alert('product_services');
    }
});

这可能不是一个“完美的解决方案”，但它符合您的要求^^

使用jquery也可以这样做：

$('body').on('click','.create_account',function(event){
    alert('.create_account');
    //do your stuff
});
$('body').on('click','.member_login',function(event){
    //...
});
$('body').on('click','.product_services',function(event){
    //...
});

---

这样，如果你添加了一个新类，需要点击一个事件，你只需要添加一个块。。。对于你的问题，我看不到任何更“具体”的答案。。。我总是这样做，因为我在类上处理事件的方式可能真的不同…

我只需要为每个类创建一个单独的

单击
处理程序，如下所示：


//定义数组中所有必需的类。。。
var选择器=[“创建账户”、“会员登录”、“产品服务”]；
//迭代数组
$.each（选择器、函数（索引、选择器）{
//为每个类附加一个新的单击处理程序。这可能是一个共享函数
$（“+”选择器）。单击（函数（e）{
e、 预防默认值（）；
警报（选择器）；//记录单个类
});
});
具有数据属性的替代方法

<a href='#' class='action-trigger' data-action='Creation'>Create Account</a>

$('.action-trigger').click(function(){
    console.log($(this).data('action'));
 });

<a href='#' class='create_account singup  header-icon'>Create Account</a>

$('.create_account').click(function(){
   MyFunction('CreateAccount');
});

$('.member_login').click(function(){
   MyFunction('MemberLogin');
});

function MyFunction(type)
{
   console.log(type);
}


$（'.action触发器'）。单击（函数（）{
console.log（$（this.data（'action'））；
});

根据第一个类检索类

<a href='#' class='create_account singup  header-icon'>Create Account</a>

$('.create_account , .member_login , .product_services').click(function(){
   console.log($(this).attr('class').split(' ')[0]);
});


$（'.create_account、.member_login、.product_services'）。单击（function（）{
console.log（$（this.attr（'class'）.split（''）[0]）；
});

带参数的替代方法

<a href='#' class='action-trigger' data-action='Creation'>Create Account</a>

$('.action-trigger').click(function(){
    console.log($(this).data('action'));
 });

<a href='#' class='create_account singup  header-icon'>Create Account</a>

$('.create_account').click(function(){
   MyFunction('CreateAccount');
});

$('.member_login').click(function(){
   MyFunction('MemberLogin');
});

function MyFunction(type)
{
   console.log(type);
}


$（'.create_account'）。单击（函数（）{
MyFunction（'CreateCount'）；
});
$（'.member_login'）。单击（函数（）{
MyFunction（'MemberLogin'）；
});
函数MyFunction（类型）
{
console.log（类型）；
}
我会将这些类添加到一个数组中，然后迭代到该数组中，以查看我们的目标是否在其class属性中包含这些类之一：


var-classes=['.create_-account'、'.member_-login'、'.product_-services']；
$（classes.join（））。单击（function（））{
对于（变量i=0；i-1）
$（'#result'）.html（classes[i]）；
}
});


这将始终返回元素拥有的类的列表。实际上，您可以在元素中包含一个“id”属性，以便在单击时访问它

<a href='#' class='but' id='create_account'>Button 1</a>

$('.but').click(function(){
  alert($(this).attr('id'));
});


$（'.but'）。单击（函数（）{
警报（$（this.attr（'id'））；
});

演示：
使用选择器数组提出了一些很好的解决方案，但这里有一个使用选择器字符串和触发元素类的解决方案

不幸的是，jQuery1.9中删除了这一点，否则这将更加简单。方法是将原始选择器作为数组获取，并将其与触发元素上的类数组相交。结果将是触发事件的类。考虑这个例子：

[“.create\u account”、“.member\u login”、“.product\u services”]

[“.class1”、“.class2”、“.create_account”]

它们的交叉点是：

[“.create_account”]

以下是工作代码：


var选择器='。创建帐户、.成员登录、.产品服务'；
$（选择器）.on（“单击”{sel:selector.split（“，”）}，函数（e）{
var classArr=$（this.attr（“class”）.split（“”.map）（函数（a）{return.”+a；}）；
var intersect=$.map（e.data.sel，函数（a）{return$.inArray（a，classArr）<0？null:a；}）；
警报（相交[0]）；
});

class1 class2 create_account
Class3Product_services class4
Class5Class6 member_login
你可以检查类，比如
如果（$（this）.hasClass（'create_account'））{…}
@Drakes，html真的需要吗？如果需要的话，我可以发布，但我觉得不需要html我重新阅读你的问题。。。不需要。Thanks@sanjeev，作为解决方法，您可以使用
数据-
属性where-place类，如
作为替代解决方法，将处理程序移动到单独的函数并提供多个事件处理程序，例如`$（“.create”）。单击（函数（）{.commonHandler（“create”）；}）；你确实是对的，但我正在寻找一个更好的解决方案，如果没有更好的选择，那么我肯定会按照你的方式行事，我会删除
其他部分。一个元素完全可能有一个或多个这样的类，所以也可以使用
e.target
您可以使用
this
wth吗？被否决的^^答案符合问题要求。只是一个旁注，但对于委派的事件处理程序，使用
文档
作为默认值（如果没有其他更接近的选项），而不是
正文
'body'
有一个与样式有关的错误，可能会导致鼠标事件不冒泡。Downvoter care解释答案有什么问题？与@RGraham相同：“Downvoter care解释答案有什么问题？”使用数据属性而不是类会有很好的语义意义。但是，您的第二个示例取决于类的顺序（因此这不是一个好主意）。第三种选择违背了整个干燥原则。在所有情况下，委托事件处理程序都比匹配多个元素的选择器更有效。我认为OP想知道当触发元素中有多个类（如
）时，单击了“.create\u account、.member\u login、.product\u services”中的哪一个。