检查元素类名答案

【问题标题】：Check element class name检查元素类名
【发布时间】：2013-07-03 02:13:35
【问题描述】：

这应该很快！

我需要通过类名来区分点击时的两个元素..例如

html:

<p class='p1'>paragraph element</p>
<p class='p2'>paragraph element</p>

jquery:

$('p').on('click', function() {
    if ($(this).attr('class', 'p1') {
        callThisFunction();
    } else {
        doNothing();
    }
});

【问题讨论】：

其他答案完全符合您的要求，但我认为您尝试做的事情需要不同的方法。详情见我的回答。

标签： javascript jquery html css-selectors

【解决方案1】：

if ($(this).is(".p1")) {

或

if ($(this).hasClass("p1")) {

$(this).attr("class", "p1") 实际上设置类属性。检查$(this).attr("class") 也不好，因为它可能有多个类。

【讨论】：

我正要回复hasClass 时看到您的答案发生了变化，想知道为什么没有人早点指出！大声笑

【解决方案2】：

$(this).hasClass('p1') 更快。

【讨论】：

你也可以回退到 vanilla javascript 并执行if ( this.className.match(/\bp1\b/) )。 \b 是边界（空格等）。

【解决方案3】：

使用.hasClass()查看班级。

$('p').on('click', function() {
    if ($(this).hasClass('p1')) {
        callThisFunction();
    } else {
        doNothing();
    }
});

工作演示：http://jsfiddle.net/nSMDA/

【讨论】：

【解决方案4】：

$('p').on('click', function() {
    if ($(this).hasClass('p1')) {
        console.log("do something");
    } else {
        console.log("do nothing");
    }
});

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

【讨论】：

【解决方案5】：

如果您需要区分这样的行为 - 只有一些元素采取行动 - 您真正应该做的只是绑定到匹配的那些，而不是绑定到每个 <p> 元素。

$('p.p1').on('click', callThisFunction);

这是 goma jsfiddle 的新分支：http://jsfiddle.net/4b8Pf/2/

【讨论】：

【解决方案6】：

if($(this).attr('class') === 'p1'){} 是您想要使用的。 $(this).attr('class', 'p1') 将当前元素设置为具有p1 的类。

【讨论】：