blocks|key|545969|text|尝试：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|545970|$(document).ready(function()+{
++++$("a").click(function(event)+{
+++++++alert(event.target.id%2B"+and+"%2B$(event.target).attr('class'));
++++});
});|code-block|syntax|javascript|545971|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Try:</p>

<pre><code>$(document).ready(function() {
    $("a").click(function(event) {
       alert(event.target.id+" and "+$(event.target).attr('class'));
    });
});
</code></pre>


blocks|key|329181|text|这将包含完整的类(如果元素有多个类，则可以是多个空格分隔的类)。在您的代码中，它将包含"konbo“或"kinta"：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|329182|event.target.className|code-block|syntax|javascript|329183|您可以使用jQuery按名称检查类：|329184|$(event.target).hasClass('konbo');|329185|并使用addClass和removeClass添加或删除它们。|offset|length|329186|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/addClass/|1|http://api.jquery.com/removeClass/^0|0|0|0|0|3|8|0|C|B|1|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|12|8|@]|9|@$M|13|N|14|1|15]|$M|16|N|17|1|18]]|A|$]]|$1|O|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]|W|$5|R|S|T|A|$U|X]]]]

<p>This will contain the full class (which may be multiple space separated classes, if the element has more than one class). In your code it will contain either "konbo" or "kinta":</p>

<pre><code>event.target.className
</code></pre>

<p>You can use jQuery to check for classes by name:</p>

<pre><code>$(event.target).hasClass('konbo');
</code></pre>

<p>and to add or remove them with <a href="http://api.jquery.com/addClass/" rel="noreferrer">addClass</a> and <a href="http://api.jquery.com/removeClass/" rel="noreferrer">removeClass</a>.</p>


blocks|key|329222|text|如果您使用的是jQuery+1.7：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|329223|alert($(this).prop("class"));|code-block|syntax|javascript|329224|或者：|329225|alert($(event.target).prop("class"));|329226|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>If you are using jQuery 1.7:</p>

<pre><code>alert($(this).prop("class"));
</code></pre>

<p>or:</p>

<pre><code>alert($(event.target).prop("class"));
</code></pre>


blocks|key|546092|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|546093|$(document).ready(function()+{
++$("a").click(function(event)+{
++++var+myClass+=+$(this).attr("class");
++++var+myId+=+$(this).attr('id');
++++alert(myClass+%2B+"+"+%2B+myId);
++});
})|code-block|syntax|javascript|546094|<html>

<head>
++<script+type="text/javascript"+src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
</head>

<body>
++<a+href="#"+id="kana1"+class="konbo">click+me+1</a>
++<a+href="#"+id="kana2"+class="kinta">click+me+2</a>
</body>

</html>|546095|546096|这对我很有效。jQuery中没有event.target.class函数。|546097|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|O|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
  $("a").click(function(event) {
    var myClass = $(this).attr("class");
    var myId = $(this).attr('id');
    alert(myClass + " " + myId);
  });
})</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;

&lt;head&gt;
  &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;a href="#" id="kana1" class="konbo"&gt;click me 1&lt;/a&gt;
  &lt;a href="#" id="kana2" class="kinta"&gt;click me 2&lt;/a&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>This works for me. There is no event.target.class function in jQuery.</p>


blocks|key|329313|text|尽管target可能并不适用于所有浏览器，但它在Chrome上运行得很好，但我认为火狐(或IE/Edge，记不起来了)有点不同，它使用的是srcElement。我通常会做这样的事情|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|329314|var+t+=+ev.srcElement+%7C%7C+ev.target;|code-block|syntax|javascript|329315|从而导致|329316|$(document).ready(function()+{
++++$("a").click(function(ev)+{
++++++++//+get+target+depending+on+what+API's+in+use
++++++++var+t+=+ev.srcElement+%7C%7C+ev.target;

++++++++alert(t.id%2B"+and+"%2B$(t).attr('class'));
++++});
});|329317|感谢你给出的答案！|329318|entityMap^0|2|6|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|Y|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|R|$]]

<p>Careful as <code>target</code> might not work with all browsers, it works well with Chrome, but I reckon Firefox (or IE/Edge, can't remember) is a bit different and uses srcElement. I usually do something like</p>

<pre><code>var t = ev.srcElement || ev.target;
</code></pre>

<p>thus leading to</p>

<pre><code>$(document).ready(function() {
    $("a").click(function(ev) {
        // get target depending on what API's in use
        var t = ev.srcElement || ev.target;

        alert(t.id+" and "+$(t).attr('class'));
    });
});
</code></pre>

<p>Thx for the nice answers!</p>


blocks|key|546184|text|您将获得以下数组中的所有类|type|unstyled|depth|inlineStyleRanges|entityRanges|data|546185|event.target.classList|code-block|syntax|javascript|546186|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You will get all the class in below array</p>

<pre><code>event.target.classList
</code></pre>


blocks|key|546237|text|对Vishesh+answer的改进，它返回一个布尔值：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|546238|event.target.classList.contains(className)|code-block|syntax|javascript|546239|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>An improvement on Vishesh answer, which instead returns a Boolean:</p>
<pre><code>event.target.classList.contains(className)
</code></pre>


<p>is there anyway to get the class when click event is fired. My code as below, it only work for id but not class.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
  $("a").click(function(event) {
    alert(event.target.id + " and " + event.target.class);
  });
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;html&gt;

&lt;body&gt;
  &lt;a href="#" id="kana1" class="konbo"&gt;click me 1&lt;/a&gt;
  &lt;a href="#" id="kana2" class="kinta"&gt;click me 2&lt;/a&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>jsfiddle code <a href="http://jsfiddle.net/fv3Ca/1/" rel="noreferrer">here</a></p>


Getting the class of the element that fired an event using JQuery

jQuery

当click事件被触发时，有没有获取类的方法。我的代码如下，它只适用于id，而不适用于class。​$(document).ready(function() {  $("a").click(function(event) {    alert(event.target.id + " and " + event.targ...

问使用JQuery获取触发事件的元素的类
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用JQuery获取触发事件的元素的类EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用JQuery获取触发事件的元素的类
EN