Как изменить класс CSS в зависимости от наличия другой комбинации классов CSS?

Question

Я пытаюсь скрыть элемент (.woocommerce_before_checkout_form) на странице оформления заказа, но только на этапе входа в систему (.wpmc-login). Другими словами: я хочу скрыть элемент в зависимости от комбинации классов CSS.

Когда они вошли в систему, они автоматически продвигаются на один шаг вперед в процессе оформления заказа, и оттуда я хочу показать элемент (.woocommerce_before_checkout_form)снова.

Каждый шаг в оформлении заказа имеет свой собственный набор классов CSS. И у активного шага есть дополнительный класс .current.

Я попытался объединить классы входа в систему с классом .current, а затем попытался обратиться к классу .woocommerce_before_checkout_form, но он не сработал. Вот что я пробовал в CSS:

li.wpmc-tab-item.current.wpmc-login + div.woocommerce_before_checkout_form {
    display: none !important;
}

Есть идеи, как это сделать в CSS или Javascript?

Вот полный код:

<div class="woocommerce">
    <div class="wpmc-tabs-wrapper wpmc-tabs-wrapper-breadcrumb wpmc-tabs-clickable">
        <ul class="wpmc-tabs-list wpmc-4-tabs">
            <li class="wpmc-tab-item current wpmc-login"></li>
            <li class="wpmc-tab-item wpmc-billing"></li>
            <li class="wpmc-tab-item wpmc-shipping wpmc-not-clickable"></li>
            <li class="wpmc-tab-item wpmc-review wpmc-not-clickable"></li>
        </ul>
    </div>
    <div style="clear: both;"></div>
    <div class="wpmc-steps-wrapper">
        <div id="woocommerce_before_checkout_form" class="woocommerce_before_checkout_form" data-step="step-review"></div>
    </div>
</div>

Я нашел решение, которое сработало для меня:

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
if ( $( ".wpmc-login" ).is( ".current" ) ) {

    $( "#woocommerce_before_checkout_form" ).hide();
}
</script>

Answer 1

Я думаю, это может быть то, что вы ищете (решение jquery):

$(document).ready(function() {
    let selectionDiv = $('.wpmc-login');
    if(selectionDiv.hasClass('active')){
        $('.woocommerce_before_checkout_form').css('display', 'none');
    }else{
        $('.woocommerce_before_checkout_form').css('display', 'block');
    }
});

, поскольку это не всегда проверяет класс active, вы можете изменить document.ready начто-то вроде: onclick, или, если вы хотите, чтобы он все время проверял, и не связывал его с событием, Google для наблюдателя jquery (но это довольно излишне для этой ситуации)