Question

我想弄清楚如何使用 JS 在五秒后隐藏已添加到购物车的消息。

我显然没有正确地做这件事，我很感激我能得到的任何帮助。

这是代码：

add_action( 'wp_footer', 'hide_atc_message' );
function hide_atc_message() { ?>

    <script>
 
    var addToCartMessage = document.getElementsByClassName('woocommerce-info'), i;
        
        for (i = 0; i < addToCartMessage.length; i += 1) {
    
        setTimeout( addToCartMessage() {
        
            $('.woocommece-info').fadeOut('fast');
        
                }, 5000);
        // addToCartMessage[i].style.display = 'none';
    }

    </script>

    <?php
}

Answer 1

查看source on GitHub，当元素成功添加到购物车时，它会触发added_to_cart 上的body 事件，您可以将自己的逻辑绑定添加到该事件:

$( document.body ).on('added_to_cart', function(fragments, cartHash, button) {
  setTimeout(() => {
    $('.woocommece-info').fadeOut('fast');
  }, 5000);
});

你似乎混淆了一些概念。

在这一行中，您将类为 woocommerce-info 的所有元素分配给 addToCartMessage var。

var addToCartMessage = document.getElementsByClassName('woocommerce-info'), i;

然后你迭代它们

for (i = 0; i < addToCartMessage.length; i += 1)

并且，为每个元素设置一个超时时间，如果设置正确，5 秒后将淡出所有具有相同类的元素

$('.woocommece-info').fadeOut('fast');

$('.woocommece-info') 是 $('.woocommece-info').fadeOut('fast'); 的 JQuery 版本，它们做了非常相似的事情，区别在于纯 JS 版本你得到一个元素数组，而 JQuery 查询返回一个 JQuery 集合。< /p>

您可以使用以下代码段执行您想要的操作：

const elements = document.getElementsByClassName('item');
const button = document.getElementById('hide');
button.addEventListener('click', event => {
  setTimeout(() => {
    for (let i = 0; i < elements.length; i++) {
      fadeOut(elements[i]);
    }
  }, 1000);
});

function fadeOut(fadeTarget) {
  const fadeEffect = setInterval(function() {
    if (!fadeTarget.style.opacity) {
      fadeTarget.style.opacity = 1;
    }
    if (fadeTarget.style.opacity > 0) {
      fadeTarget.style.opacity -= 0.1;
    } else {
      fadeTarget.style.display = 'none';
      clearInterval(fadeEffect);
    }
  }, 100);
}

<div id="container">
  <li class="item">one</li>
  <li class="item">two</li>
  <li class="item">three</li>
  <li class="item">four</li>
</div>
<button id="hide">Hide elements</button>

或者，使用 JQuery：

$('#hide').click(() => {
  setTimeout(() => {
    $('.item').fadeOut();
  }, 2000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <li class="item">one</li>
  <li class="item">two</li>
  <li class="item">three</li>
  <li class="item">four</li>
</div>
<button id="hide">Hide elements</button>

X 秒后自动隐藏“已添加到购物车”的 WooCommerce 消息

1 个答案: