Question

我有一个HTML下面的标签：

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

我正在使用3按钮的常用点击处理程序，其中包含类create_account，member_login，product_service

现在在处理程序中，我想要以最佳方式（最小条件）触发click事件的类名

 $('.create_account , .member_login , .product_services').click(function(){


    console.log($(this).attr('class')); 

    /**

      In case , user click on button with class `create_account` , I get in console

      `create_account singup  header-icon` , which is correct, 

       **but I want `create_account` i.e is the class which triggered the Click event**

    */


 });

Answer 1

我只想为每个类创建一个单独的click处理程序，如下所示：

＆＃13;

// Define all the required classes in an array...
var selectors = ["create_account", "member_login", "product_services"];
// Iterate over the array
$.each(selectors, function(index, selector) {
    // Attach a new click handler per-class. This could be a shared function
    $("."+selector).click(function(e) {
        e.preventDefault();
        alert(selector); // Logs individual class
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="create_account" href="">Create</a>
<a class="member_login" href="">Login</a>
<a class="product_services" href="">Services</a>

＆＃13;

如果您愿意，可以将共享逻辑抽象为另一个函数，like this Fiddle

Answer 2

使用数据属性的替代方法

<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 , .member_login , .product_services').click(function(){
   console.log($(this).attr('class').split(' ')[0]);
});

带参数的替代方法

<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);
}

Answer 3

$(this).attr('class');

这将始终返回元素所具有的类列表。你实际上可以包含一个＆＃39; id＆＃39;单击时要访问元素的属性。

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

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

演示：https://jsfiddle.net/dinesh_feder/2uq5h03j/

Answer 4

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

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

[“。create_account”，“。member_login”，“。product_services”]
[“。class1”，“。class2”，“。create_account”]

他们的交集是：

[ “CREATE_ACCOUNT”]

这是工作代码：

var selector = '.create_account, .member_login, .product_services';
$(selector).on("click", { sel: selector.split(", ") }, function(e){

  var classArr = $(this).attr("class").split(" ").map(function(a){ return "."+a; });
  var intersect = $.map(e.data.sel,function(a){return $.inArray(a, classArr) < 0 ? null : a;});

  alert(intersect[0]); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="class1 class2 create_account">class1 class2 create_account</button><br/><button class="class3 product_services class4">class3 product_services class4</button><br/><button class="class5 class6 member_login">class5 class6 member_login</button>

Answer 5

我会将这些类添加到一个数组中，然后迭代到它以查看我们的目标是否具有其类别属性中的一个：

var classes = ['.create_account' , '.member_login' , '.product_services'];
 $(classes.join()).click(function(){
   for(var i=0; i<classes.length; i++){
     var classPos = $(this).attr('class').indexOf(classes[i].substring(1));
     if(classPos>-1)
       $('#result').html(classes[i]);
     }
   });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href='#' class='create_account singup  header-icon'>Create Account</a>
<a href='#' class='member_login singup  header-icon'>Member Login</a>
<a href='#' class='singup  header-icon product_services'>product services</a>
<p id="result"></p>

Answer 6

好吧，收回Manish Jangir ....例如，如果你只需要检索相关的类，那你为什么不测试呢？你使用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){
    //...
});

这样你只需要添加一个块，如果你添加一个需要点击它的事件的新类...我没有看到你的问题的任何“特定”答案......我总是习惯做这样，因为我在类上处理事件的方式可能真的不同......

获取触发事件的类名

6 个答案: