jQuery-检测div是否有2个类

Question

I am using jQuery to detect a click like this..

$(".clickable_link").click(function() {
    console.log('Link Clicked');
}

<div class="clickable_link">
    Click Me
</div>

<div class="clickable_link special">
    Click Me
</div>

I am trying to determine if the div with 'special' has been clicked or if it just the div with 'clickable_link'.

What is the best way to do this? Should I use hasclass or is filter a better choice?

Answer 1

Something like this:

 $(".click").click(function(){ if ($(this).hasClass("special")) { alert("Its Special!"); } }); 

 .click { width:100px; height:50px; background-color:#333; float:left; margin:10px; color:#fff; text-align:center; padding-top:25px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="click">Not Special</div> <div class="click special">SPECIAL!</div> 

Answer 2

As an alternative to .hasClass , you can use .is , which allows for any selector, not just checking for a class.

if($(this).is(".special")) { ...

 $(".clickable_link").click(function() { if ($(this).is(".special")) { alert("special clicked"); } else { alert("nope"); } }); 

 .special { color: red; } .clickable_link { cursor: pointer; margin-bottom: 0.5em; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="clickable_link"> Click Me </div> <div class="clickable_link special"> Click Me </div> 

Answer 3

 $('#id1').click(function() { var x = $('#id1').attr('class') //dont use classname to fetch the element x = x.split(' ') if (x.length > 2) alert('id1 has more than 2 classes'); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='id1' class='myclass mysubclass'>dfdfdfsdfds</div> 

Answer 4

You can bind different event handlers depending on whether the special class exists.

$(".clickable_link.special").click(function()
    console.log("Special link clicked");
})
$(".clickable_link:not(.special)").click(function() {
    console.log("Ordinary link clicked");
});

If there's common code for both types of links, you can put that in another function that gets called by each handler.

Answer 5

As example, use can can detect count of classes as like it:

$(".clickable_link").click(function() {
    var classList = $(this).attr('class').split(/\s+/);
    console.log(`count ${classList.length}`);
}