我有这种html：
<div style="animation-duration: 1.5s; opacity: 1;" id="wrapper" class="clearfix website outerDiv" data-url="/websites/<%= @website.id %>">
<section id="slider" class="slider-parallax innerDiv" style="background: transparent url(<%= @website.background_image.present? ? @website.background_image : (image_path current_user.website.theme.image_name) %>) no-repeat scroll 0% 0% / cover ; height: 600px; transform: translate(0px, 0px);" data-height-lg="600" data-height-md="500" data-height-sm="400" data-height-xs="300" data-height-xxs="250">
<div class="contentDiv" id="clearfix">
<div style="margin-top: 5px; width: 170px; height: 170px;" id="imageEditor" class="imageEditor" data-attr="logo" id="website-logo">
mycontent
</div>
<div style="position: absolute; top: 50%; width: 100%; margin-top: -81px; opacity: 1.77778;" class="website-title vertical-middle dark center">
<div class="heading-block nobottommargin center">
<div contenteditable="true" class="textEditor" data-attr="heading" id="website-title">
mycontent
</div>
<div class="hidden-xs textEditor" contenteditable="true" data-attr="description" id="website-desc">mycontent</div>
</div>
<a href="#" class="button button-border button-light button-rounded button-reveal tright button-large topmargin hidden-xs"><i class="icon-angle-right"></i><span>Start Tour</span></a>
</div>
</div>
</section>
</div>
现在，我想在这里捕获我将点击的div的div类。
我正在尝试的功能但它没有按预期工作。它一直只给出第一个div类：
$(document).ready(function () {
$('.outerDiv').click(function () {
alert($(this).attr('class'));
});
});
答案 0 :(得分：7)
以下内容可以获取发生点击的确切元素的类名。
$(document).ready(function () {
$('.outerDiv').click(function (e) {
alert(e.target.className);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div style="animation-duration: 1.5s; opacity: 1;" id="wrapper" class="clearfix website outerDiv" data-url="/websites/<%= @website.id %>">
<section id="slider" class="slider-parallax innerDiv" style="background: transparent url(<%= @website.background_image.present? ? @website.background_image : (image_path current_user.website.theme.image_name) %>) no-repeat scroll 0% 0% / cover ; height: 600px; transform: translate(0px, 0px);" data-height-lg="600" data-height-md="500" data-height-sm="400" data-height-xs="300" data-height-xxs="250">
<div class="contentDiv" id="clearfix">
<div style="margin-top: 5px; width: 170px; height: 170px;" id="imageEditor" class="imageEditor" data-attr="logo" id="website-logo">
mycontent
</div>
<div style="position: absolute; top: 50%; width: 100%; margin-top: -81px; opacity: 1.77778;" class="website-title vertical-middle dark center">
<div class="heading-block nobottommargin center">
<div contenteditable="true" class="textEditor" data-attr="heading" id="website-title">
mycontent
</div>
<div class="hidden-xs textEditor" contenteditable="true" data-attr="description" id="website-desc">mycontent</div>
</div>
<a href="#" class="button button-border button-light button-rounded button-reveal tright button-large topmargin hidden-xs"><i class="icon-angle-right"></i><span>Start Tour</span></a>
</div>
</div>
</section>
</div>
答案 1 :(得分：3)
问题在于选择器。打开选择器，你必须停止传播，不要让所有父母同时发起同一事件。
试试这个：
<div style="animation-duration: 1.5s; opacity: 1;" id="wrapper" class="clearfix website outerDiv" data-url="/websites/<%= @website.id %>">
<section id="slider" class="slider-parallax innerDiv" style="background: transparent url(<%= @website.background_image.present? ? @website.background_image : (image_path current_user.website.theme.image_name) %>) no-repeat scroll 0% 0% / cover ; height: 600px; transform: translate(0px, 0px);" data-height-lg="600" data-height-md="500" data-height-sm="400" data-height-xs="300" data-height-xxs="250">
<div class="contentDiv" id="clearfix">
<div style="margin-top: 5px; width: 170px; height: 170px;" id="imageEditor" class="imageEditor" data-attr="logo" id="website-logo">
mycontent
</div>
<div style="position: absolute; top: 50%; width: 100%; margin-top: -81px; opacity: 1.77778;" class="website-title vertical-middle dark center">
<div class="heading-block nobottommargin center">
<div contenteditable="true" class="textEditor" data-attr="heading" id="website-title">
mycontent
</div>
<div class="hidden-xs textEditor" contenteditable="true" data-attr="description" id="website-desc">mycontent</div>
</div>
<a href="#" class="button button-border button-light button-rounded button-reveal tright button-large topmargin hidden-xs"><i class="icon-angle-right"></i><span>Start Tour</span></a>
</div>
</div>
</section>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('.outerDiv, .outerDiv div').click(function (e) {
alert($(this).attr('class'));
e.stopPropagation();
});
});
</script>
答案 2 :(得分：2)
$(document).ready(function () {
$('.outerDiv ').click(function (e) {
console.log(e.target.className);
});
});
像魅力一样工作，加上你使用console.log而不是提醒查看事物
更好答案 3 :(得分：1)
它将警告已附加事件的div的类。您需要绑定所需的所有div的事件。如果你需要父div的类，只需在绑定函数中引用它。
答案 4 :(得分：1)
如果您正在寻找特定课程，那么您可以使用".hasClass('className')"
如果你想要div上的所有类
$(document).ready(function () {
$('.outerDiv').click(function () {
var className = this.className;
alert(className);
});
});
这是一个原生的JS方法，而不是jquery。
答案 5 :(得分：1)
如果你想这样，点击你网页上的任何div都会提醒该div的类名，而不是你需要在页面中的所有div上绑定.click()事件。 还要阻止您的点击事件传播到父div，以便它只显示当前div点击类名。
试试这段代码：
$(document).ready(function () {
$('div').on('click', function(e) {
alert($(this).attr('class'));
e.stopPropagation();
});
});
答案 6 :(得分：1)
jQuery(document).ready(function () {
$('div').on('click', function(e) {
console.log(e.target.className);
e.stopPropagation();
});
});