【问题标题】：Getting the class name of an element that was clicked [duplicate]获取被点击的元素的类名[重复]
【发布时间】：2014-07-13 00:59:12
【问题描述】：

我在 jQuery 中有一个类，我想获取已单击元素的类。（元素在同一个类中）。

<!DOCTYPE html>
<html>
<head>
<title>Try jQuery 2.0.0 Online</title>
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script>
$(document).ready(function() {

$('.shikhar').click(function(){

   var decide=$(this).attr('class'); 
                  //here I want to know what was the class of the element that was clicked
   alert(decide);

   if(decide=='a'){
       $(this).find('.b').addClass("selected");
       $(this).find('.a').addClass("highlight");
   }else{
       $(this).find('.a').addClass("selected");
       $(this).find('.b').addClass("highlight");
   }

});



    });


</script>
<style>
.selected { 
    color:red; 
}
.highlight { 
    background:yellow; 
}
</style>
</head>
<body>

<div class="shikhar">

    <div class="a">Superman</div>
    <div class="b">Hulk</div>

</div>


<div class="shikhar">

    <div class="a">Spiderman</div>
    <div class="b">Batman</div>

</div>

</body>
</html>

这是一个小提琴 - http://jsfiddle.net/6QjN6/

【问题讨论】：

你的标题说你想要类名，但你的问题说你想要 id...它是哪一个？
如果要获取ID，必须先将ID放入元素中。他们没有身份证。

标签： javascript jquery html css

【解决方案1】：

解决方案 1

使用e.target 获取事件开始的元素。

JSFiddle

$('.shikhar').click(function (e) {
    var decide = $(e.target).attr('class');
    ...

解决方案 2

您还可以使用.shikhar > div 之类的选择器将侦听器放在您希望点击的特定元素上，然后this 就是您所期望的。看起来像这样：

JSFiddle

请注意，如果您使用此选择器，则必须更改您的 addClass() 才能找到同级：

   if(decide=='a'){
       $(this).parent().find('.b').addClass("selected");
       $(this).parent().find('.a').addClass("highlight");
   }else{
       $(this).parent().find('.a').addClass("selected");
       $(this).parent().find('.b').addClass("highlight");
   }

或

   if(decide=='a'){
       $(this).next('.b').addClass("selected");
       $(this).addClass("highlight");
   }else{
       $(this).prev('.a').addClass("selected");
       $(this).addClass("highlight");
   }

建议

如果用户可以点击多次，您可能希望删除“选定”和“突出显示”类，这样它们就不会同时出现这两个类。

另外，检查它是否有一个类的“a”或“b”，而不是它是否是唯一的类。这将确保即使添加了其他类也能正常工作。这是一个更新的版本：

JSFiddle

$(document).ready(function () {

    $('.shikhar > div').click(function (e) {
        $this = $(this);
        $parent = $this.parent(); // just to prevent so much jquery object creation
        var decide;
        if ($this.hasClass('a')) {
            decide = 'a';
        } else if ($this.hasClass('b')) {
            decide = 'b';
        }
        console.log(decide);

        if (decide == 'a') {
            $parent.find('.b').removeClass("highlight").addClass("selected");
            $parent.find('.a').removeClass("selected").addClass("highlight");
        } else {
            $parent.find('.a').removeClass("highlight").addClass("selected");
            $parent.find('.b').removeClass("selected").addClass("highlight");
        }
    });
});

【讨论】：

感谢 smerny 的回答 :) 我试过了，但是这段代码不起作用 if(decide=='a'){ $(this).find('.b').addClass("selected "); $(this).find('.a').addClass("highlight"); }else{ $(this).find('.a').addClass("selected"); $(this).find('.b').addClass("highlight"); }
@Shikhar_Bansal，我的帖子中有两个不同的答案。看起来您使用了第二个答案，但没有像我提到的那样更新 addclass 部分。如果您查看 JSFiddles，它们都会按照我的预期工作。
@Shikhar_Bansal，我在我的建议中解决了代码的其他一些问题。这样，您实际上可以在应用它们后更改选择/突出显示。

【解决方案2】：

$('.shikhar div').click(function(e){
   e.preventDefault();
   var decide = this.className;
   alert(decide);

   if(decide=='a'){
       $(this).find('.b').addClass("selected");
       $(this).find('.a').addClass("highlight");
   }else{
       $(this).find('.a').addClass("selected");
       $(this).find('.b').addClass("highlight");
   }

});

这是一个更新的JSFiddle

【讨论】：

这不会添加类，因为它无法在.shikhar div 中找到.a 或.b。

【解决方案3】：

您需要将点击处理程序更改为：

$('.shikhar div').click(function(){});

【讨论】：

有几个问题没有解决，其中一个是它造成的。