Как получить класс DIV с помощью JQuery OnClick

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

Проблема в селекторе. И, открыв селектор, вы должны прекратить распространение, чтобы у всех родителей не было одного и того же события.

Попробуйте это:

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

Попробуйте это:

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

Answer 3

Ниже можно получить имя класса точного элемента, на котором произошел щелчок.

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

Это предупредит класс DIV, на котором событие было привязано. Вам нужно будет привязать события для всех разделов, для которых нужен класс. И в случае, если вам нужен класс для родительского div, просто отсылайте его в связанной функции.

Answer 5

Если вы ищете конкретный класс настоящий или нет, то вы можете использовать ".hasClass('className')"

Если вы хотите, чтобы все классы на DIV

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

Это является нативным методом JS, не JQuery ,

Answer 6

Если вы хотите, чтобы, по нажатию любого DIV с Вашей страницы предупредит имя класса для этого DIV, чем вам нужно, чтобы связать .click() события на все сОн, присутствующий в вашей странице , Также предотвратите распространение события click в родительском div, чтобы он отображал только текущее имя класса div.

Попробуйте этот код:

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

Здесь Jsfiddle Demo

Answer 7

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

будет работать как шарм, плюс его лучше использовать console.log, а не предупреждение, чтобы смотреть на вещи

Answer 8

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