这是一个更新的JSFiddle

Question

我在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/

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

Answer 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

Answer 3

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

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

获取单击的元素的类名称

3 个答案:

这是一个更新的JSFiddle