javascript - 结账页面上的 BigCommerce 自定义 JavaScript 不起作用

Question

我需要在结帐页面上隐藏税价 div。我向 checkout.html 添加了 javascript 代码，但它在控制台中找不到元素并发生错误。看来 javascript 在元素加载之前运行。如果我在控制台上运行脚本，它运行良好。怎么解决这个问题呢？我添加了整个 checkout.html 文件。我在 html 文件末尾添加了脚本。

{{#partial "head"}}

{{{ checkout.checkout_head }}}
{{{ stylesheet '/assets/css/optimized-checkout.css' }}}
{{ getFontsCollection }}

<script type="text/javascript">
    window.language = {{{langJson 'optimized_checkout'}}};
</script>

{{{head.scripts}}}

{{/partial}}

{{#partial "page"}}
<header class="checkoutHeader optimizedCheckout-header">
    <div class="checkoutHeader-content">
        <h1 class="is-srOnly">{{lang 'checkout.title'}}</h1>
        <h2 class="checkoutHeader-heading">
            <a class="checkoutHeader-link" href="{{urls.home}}">
                {{#if checkout.header_image}}
                    <img alt="{{settings.store_logo.title}}" class="checkoutHeader-logo" id="logoImage" src="{{ checkout.header_image }}"/>
                {{ else }}
                    <span class="header-logo-text">{{settings.store_logo.title}}</span>
                {{/if}}
            </a>
        </h2>
    </div>
</header>
<div style="text-align:center;padding:4px;color: #ff0000;font-size:14px;">Sales tax will be removed during step 2 for all states, except PA, TX & WA.</div>
{{{ checkout.checkout_content }}}

{{{ footer.scripts }}}

{{/partial}}

{{> layout/empty}}

***<script type="text/javascript">
       document.querySelector('[data-test="cart-taxes"]').style.display = "none"; 
</script>***

Answer 1

优化的单页结账的 Accordion 布局分阶段加载，所以你是对的——你的 JS 在目标元素存在之前运行。您可以按一定时间间隔运行代码，但更好的解决方案是使用类似 Mutation Observer 的内容。观察 DOM 中的变化。

这里是关于使用 Mutation Observer 的开箱即用的教程: http://ryanmorr.com/using-mutation-observers-to-watch-for-element-availability/

但是您也可以查看这个包装器库，它消除了使用 MO 的许多复杂性:https://github.com/uzairfarooq/arrive

但是要以稍微不同的方式回答您的问题，为什么不直接使用 CSS 隐藏购物车税行项目呢？这样，您就不必担心观察 DOM:

<style>
    .cart-priceItem:nth-child(5) {
    display: none;
}
</style>