javascript - 如何使用jquery onclick获取div的类

Question

我有这样的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'));
    });
});

Answer 1

下面的代码可以获取发生点击的确切元素的类名。

$(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>