Javascript div class check onclick

Question

I am trying to check onclick if div have one of two different classes added to main div class and if there is no such - give back alert. Here is the example of all possible div's:

<div class="mainclass class1"></div>
<div class="mainclass class2"></div>
<div class="mainclass"></div>

If I am trying to check for class existence using JS something like,

$('.mainclass').click(function () {
    var check1 = $(this).hasClass('class1');
    var check2 = $(this).hasClass('class2');
    if(check1 == false || check2 == false)
                { 
                    alert("Hey, you are clicking empty field!")
                }
});

System will always give back alert even if I will click on first two div's. Is there any ways to make proper check of this using JS?

Its because the condition is fullfilled each time you click on any div :) — Joakim M
– Joakim M, Commented Apr 3, 2014 at 12:08

raina77ow · Accepted Answer · 2014-04-03 12:22:12Z

3

It's easier to apply these restrictions when selecting the object to be tracked:

$('.mainclass').not('.class1, .class2').click(function () {
  alert("Hey, you are clicking empty field!")
});

If these classes are indeed added/removed dynamically, again, state your intent directly:

$('.mainclass').click(function() {
    if ( $(this).is(':not(.class1, .class2)') ) { 
        alert("Hey, you are clicking empty field!");
    }
});

edited Apr 3, 2014 at 12:22

answered Apr 3, 2014 at 12:09

raina77ow

107k16 gold badges205 silver badges240 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

A. Wolff Over a year ago

Or: .not('.class1, .class2'). I give +1 but could not be what OP is looking for if classes are added/removed dynamically

Felix · Accepted Answer · 2014-04-03 12:08:28Z

1

You need AND && operator here instead of OR ||:

if(check1 == false && check2 == false)

Fiddle Demo

answered Apr 3, 2014 at 12:08

Felix

38.2k8 gold badges45 silver badges56 bronze badges

Comments

Sudharsan S · Accepted Answer · 2014-04-03 12:15:58Z

1

Just check like this

$('.mainclass').click(function () {
    var check1 = $(this).hasClass('class1');
    var check2 = $(this).hasClass('class2');
    if(!check1 && !check2 )
                { 
                    alert("Hey, you are clicking empty field!")
                }
});

another Way

$('.mainclass').click(function () {

    if(!$(this).hasClass('class1') && !$(this).hasClass('class2'))
         { 
            alert("Hey, you are clicking empty field!")
         }
 });

edited Apr 3, 2014 at 12:15

answered Apr 3, 2014 at 12:09

Sudharsan S

15.4k4 gold badges34 silver badges51 bronze badges

Comments

Milind Anantwar · Accepted Answer · 2014-04-03 12:16:41Z

1

Change the operator to && not ||:

$('.mainclass').click(function () {
var check1 = $(this).hasClass('class1');
var check2 = $(this).hasClass('class2');
if(check1 == false && check2 == false)
            { 
                alert("Hey, you are clicking empty field!")
            }
});

Working Demo

edited Apr 3, 2014 at 12:16

answered Apr 3, 2014 at 12:08

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Collectives™ on Stack Overflow

Javascript div class check onclick

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related