javascript - 如何根据是否存在另一个 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，或者如果你想让它一直检查它，并且不要将它链接到事件，请在谷歌上搜索 jquery 观察器(但这对于这种情况来说太过分了)