Question

以下是我无法控制HTML的购物网站上的“查看购物车”链接：

<div class="cart-link">
    <a href="#">
        View Cart <span class="total"></span>
    </a>
</div>

将商品添加到购物车时，当前span标签正在更新为包含空格，然后在方括号中添加数字，例如：

View Cart <span class="total"> (1)</span>

这是立即发生的，无需重新加载页面（AJAX？）。

不确定这是否可行，但是我可以使用JS / jQuery在该span标签上“保持监视”，并且一旦它包含数字，则执行以下两项操作：（a）从周围删除括号数字，然后（2）在span标签中添加一个额外的类名。所以最终会变成这样：

View Cart <span class="total new-class"> 1</span>

谢谢

Answer 1

您正在寻找MutationObserver。观察<span>，并在其更改时检查其textContent是否有数字。如果是这样，请执行所需的操作：

const total = document.querySelector('.total');
const observer = new MutationObserver(() => {
  const numMatch = total.textContent.match(/\d+/);
  if (numMatch === null) return;
  changing = true;
  total.textContent = numMatch[0];
  total.classList.add('new-class');
});
observer.observe(total, { childList: true });

setTimeout(() => {
  total.textContent = '(3)';
}, 2000);

.new-class {
  background-color: yellow;
}

<div class="cart-link">
    <a href="#">
        View Cart <span class="total"></span>
    </a>
</div>

如果标签包含数值，请删除方括号并添加类名称

1 个答案: