CODEWITHSUNDEEP
jquery
Jonas
Jonas

Reputation: 111

How to select element with multiple exact classes

I would like to select following element in DOM to redirect the user to another page if he clicks the button.

<button type="submit" name="add-to-cart" class="single_add_to_cart_button button alt ph_bookings_book_now_button">Book Now</button>

To do so, I use jQuery jQuery(".single_add_to_cart_button.button.alt.ph_bookings_book_now_button").on("click", function() {...}.

Since I use a plugin, the booking button is visually not active until the user selects a date. The class is then .single_add_to_cart_button.button.alt.disabled.ph_bookings_book_now_button (see additional disabled).

To select the button only if the element doesn't contain the class disabled, I've tried the following:

jQuery(".single_add_to_cart_button.button.alt.ph_bookings_book_now_button").on("click", function() {
  if(jQuery(".single_add_to_cart_button.button.alt.disabled.ph_bookings_book_now_button")) {
    break;
  } else {
    window.location = "http://www.google.com/";
  }
});

Unfortunately this doesn't work. How can I select an element if it contains exactly the classes and nothing more?

Upvotes: 1

Views: 64

Answers (3)

Omkar
Omkar

Reputation: 392

You can do it without the 2 classes, you only need the event on one class if this event has to be only on one such element: single_add_to_cart_button You can also just give a new class for the event so you dont have trouble finding it later. (refer naming convention docs for faster development) Try this:

jQuery(".single_add_to_cart_button.button.alt.ph_bookings_book_now_button:not(.disabled)").on("click", function() { ... });

Better way to write it is: 

$(".yourElement:not(.disabled)").on('click', function { ... });

Upvotes: 1

Mahatmasamatman
Mahatmasamatman

Reputation: 1535

You can use the :not selector

jQuery(".single_add_to_cart_button.button.alt.ph_bookings_book_now_button:not(.disabled)").on("click", function()...

Upvotes: 3

Muneeb Ur Rehman
Muneeb Ur Rehman

Reputation: 134

why dont you set id attribute to your button like

<button id="btn_abc" type="submit" name="add-to-cart" class="single_add_to_cart_button button alt ph_bookings_book_now_button">Book Now</button>

and use id instead of class i.e

jQuery("btn_abc").on("click", function() {
    if(jQuery("#btn_abc").hasClass('disabled')) {
        break;
    } else {
        window.location = "http://www.google.com/";
    }
});

Thanks for letting us Help

Upvotes: 0

Related Questions