Как выбрать элемент с несколькими точными классами

Question

Я бы хотел выбрать следующий элемент в DOM, чтобы перенаправить пользователя на другую страницу, если он нажмет кнопку.

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

Для этого я использую jQuery jQuery(".single_add_to_cart_button.button.alt.ph_bookings_book_now_button").on("click", function() {...}.

Поскольку я использую плагин, кнопка бронирования визуально не активна, пока пользователь не выберет дату. Тогда класс будет .single_add_to_cart_button.button.alt.disabled.ph_bookings_book_now_button (см. Дополнительно disabled).

Чтобы выбрать кнопку только в том случае, если элемент не содержит отключенный класс, я попробовал следующее:

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/";
  }
});

К сожалению, это не работает. Как выбрать элемент, если он содержит именно классы и ничего более?

Answer 1

Вы можете использовать: not selector

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

Answer 2

Вы можете сделать это без 2 классов, вам нужно событие только для одного класса, если это событие должно быть только для одного такого элемента: single_add_to_cart_button Вы также можете просто дать новый класс для события, чтобы у вас не было проблемы с поиском позже. (обратитесь к документации по соглашениям об именах для более быстрой разработки) Попробуйте это:

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

Лучший способ написать это:

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

Answer 3

Почему вы не устанавливаете атрибут id для своей кнопки, например

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

и используете идентификатор вместо класса, т. Е.

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

Спасибо, что разрешили нам помочь