Javascript 如何使用jqueryonclick获取div类

我有这种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>

试试这个：

$(document).ready(function () {
    $('.outerDiv').click(function () {    
      var className = $(this).attr('class');
      alert(className);
    });
});

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

---

下面可以获得发生单击的确切元素的类名

$（文档）.ready（函数（）{
$（'.outerDiv'）。单击（函数（e）{
警报（如target.className）；
});
});

霉菌含量
霉菌含量
霉菌含量
它将提醒事件已附加到的div的类。您将需要为类所需的所有div绑定事件。如果需要父div的类，只需在绑定函数中引用它
 如果要查找是否存在特定类，则可以使用
“.hasClass（'className'）”

如果你想把所有的类都放在div上

$(document).ready(function () {
    $('.outerDiv').click(function () {    
      var className = this.className;
      alert(className);
    });
});

这是一个本地JS方法，不是jquery。
问题在于选择器。打开选择器时，必须停止传播，以避免所有父级触发同一事件

试试这个：

$(document).ready(function () {
    $('.outerDiv').click(function () {    
      var className = $(this).attr('class');
      alert(className);
    });
});

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


霉菌含量
霉菌含量
霉菌含量
$（文档）.ready（函数（）{
$（'.outerDiv，.outerDiv'）。单击（函数（e）{
警报（$（this.attr（'class'））；
e、 停止传播（）；
});
});
如果需要，单击页面中的任何div都会提醒该div的类名，而您需要绑定页面中所有div上的事件。
还要防止click事件传播到父div，以便它只显示当前div click类名

请尝试以下代码：

$(document).ready(function () {
   $('div').on('click', function(e) {
       alert($(this).attr('class'));
       e.stopPropagation();
   });
});  

这是

将像一个符咒一样工作，而且最好使用console.log而不是alert来查看内容
这个。classname
是一个很好的选择。如果我使用这个，它会说
未定义
。到目前为止已尝试了很多项。因为它必须是
。className
也尝试了此项。不走运@安德烈亚斯发生了什么事？？你没有让班级处于警戒状态吗？你能举一个输出u wamt的例子吗？它不适用于区段标签。很抱歉它没有返回其内容，因为其中有背景图像。因此它满足了我的要求。很抱歉，它将返回您的div的类名。即使它在节标记内。它对节标记无效。很抱歉它没有返回其内容，因为它有背景。以下内容的含义是什么：
$（'.outerDiv，.outerDiv'）。单击（函数（e）{
？我想了解
outerDiv、.outerDiv
请解释一下你的JS代码。这将帮助我理解问题和知识。谢谢。奇怪的是，你的代码返回空警报。我很惊讶。@learningor空警报是在点击目标是一个没有类名的元素时出现的。为什么
$（'.outerDiv，.outerDiv'）。单击（函数（e）{
可以很好地处理公认的答案，但不适用于您的答案？这意味着什么？您能解释一下吗。
jQuery(document).ready(function () {
   $('div').on('click', function(e) {
       console.log(e.target.className);
       e.stopPropagation();
   });
});