如何使用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> 

Answer 2

问题在于选择器。 并打开选择器，你必须停止传播，不让所有父母发射相同的事件。

尝试这个：

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

Answer 3

$(document).ready(function () {
    $('.outerDiv ').click(function (e) {
        console.log(e.target.className);
    });
});

会像魅力一样工作，加上你使用console.log而不是警告查看东西更好

Answer 4

尝试这个：

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

Answer 5

它将警告已附加事件的div的类。 您需要绑定所需的所有div的事件。 如果你需要父div的类，只需在绑定函数中引用它。

Answer 6

如果您正在寻找一个或不存在的特定课程，那么您可以使用".hasClass('className')"

如果你想要div上的所有类

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

这是一个本机JS方法，而不是jquery。

Answer 7

如果你想要，那么点击页面中的任何div都会提醒该div的类名，而不是你需要在页面中的所有div上绑定.click（）事件。 还要阻止您的点击事件传播到父div，以便它只显示当前div点击类名。

试试这段代码：

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

这是Jsfiddle演示

Answer 8

jQuery(document).ready(function () {
   $('div').on('click', function(e) {
       console.log(e.target.className);
       e.stopPropagation();
   });
});