获取被点击的元素的类名[重复]
Posted
技术标签:
【中文标题】获取被点击的元素的类名[重复]【英文标题】：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放入元素中。他们没有身份证。 【参考方案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());
【讨论】：
有几个问题没有解决，其中一个是它造成的。以上是关于获取被点击的元素的类名[重复]的主要内容，如果未能解决你的问题，请参考以下文章