Question

可能重复：
Get Class List for Element with jQuery

如果我有这样的东西，我可以通过这样做获得点击选择器的id。

$('#one, #two, #three').click(function(){
    alert(this.id)
})

我的问题是，如果我有类而不是id，我如何获得所点击选择器的类名。

$('.one, .two, .three').click(function(){
    // ??????
})

编辑：

点击的元素可能有多个类，我希望隔离用于最初选择元素的类。

Answer 1

您使用原生.className属性。

this.className

this.className代替this.class，因为class是JavaScript中的保留字，有些浏览器不允许将保留字用作属性名称。

听起来元素上可能有多个类。要隔离一个，您可以将$.grep与$.inArray一起使用。

var classes = ['one','two','three'];

$('.' + classes.join(',.')).click(function(){
    var classNames = this.className.split(/\s+/);
    var cls = $.grep(classNames, function(c, i) {
        return $.inArray(c, classes) !== -1;
    })[0];
    alert(cls);
});

DEMO： http://jsfiddle.net/rFT8j/

或者您可以使用$.each代替$.grep。

var classes = ['one','two','three'];

$('.' + classes.join(',.')).click(function(){
    var classNames = this.className.split(/\s+/);
    var cls;
    $.each(classNames, function(i, c) {
        if( $.inArray(c, classes) !== -1 ) {
            cls = c;
            return false;
        }
    });
    alert(cls);
});

DEMO： http://jsfiddle.net/rFT8j/1/

如果你想要一些更简单的东西，一个解决方案是利用闭包，并分配单独的处理程序，每个处理程序在变量范围中引用不同的名称......

var classes = ['one','two','three'];

$.each(classes, function(i, c) {
    $('.' + c).click(function(){
        alert(c);
    });
});

DEMO： http://jsfiddle.net/rFT8j/3/

Answer 2

只需使用JQuery的.attr来获取属性类值

alert($(this).attr("class"));

Answer 3

$('.one, .two, .three').click(function(e){
    console.log($(e.currentTarget).attr('class'))
})

Answer 4

以下两种方法应该有效：

$('#one, #two, #three').click(function(){
    alert(this.className)
})

$('#one, #two, #three').click(function(){
    alert($(this).attr("class"))
})

jQuery获得点击的类名

4 个答案: