Question

https://www.skycandyaustin.com/class/open-studio/

在这里您可以在10月25日（星期四）看到Waitlist Button。要求是如果班级已满，则显示Waitlist而不是button，我做到了。下面是相同的代码。

$("div.bw-session:has(span.hc_waitlist)").each(function () {
               $(this).find(".bw-widget__signup-now").hide();
               $("span.bw-widget__cart_button", this).append("<a class=\"hc-button signup_now bw-widget__signup-now bw-widget__cta\" href=\"mailto:"
                   + scConfig.waitlistEmail + "?subject=Waitlist for "
                   + $('div.bw-session__name', this).text().replace(reWhitespace, ' ')
                   + '&body=Hello%2c  %0D%0A %0D%0A Please add me to the Waitlist for '
                   + $('div.bw-session__name', this).text().replace(reWhitespace, ' ')
                   + " on " + $(this).parent().children('.bw-widget__date').text().replace(/,/g, "")
                   + " with " + $("div.bw-session__staff", this).text()
                   + ".\">Waitlist</a>");
 });

然后，我使用了DOM MutationObserver，但是现在我面临的问题是，如果您检查一下inspect元素，您可以看到锚定类每1秒追加一次。这是相同的代码。我只需要追加一次元素。那你能帮我解决这个问题吗？

// Observer way to listen for changes
// Create an observer instance

var observer = new MutationObserver(function (mutations) {
    if (mutatingWidget === false) {
        if (mutationTimer > 0) {
            window.clearTimeout(mutationTimer);
        }
        mutationTimer = window.setTimeout(postWidgetLoad, 1000);
    }
});

// Configuration of the observer:
   var config = { attributes: true, childList: true, subtree: true };

// Pass in the target node, as well as the observer options
$("healcode-widget").each(function () {
    console.debug("Observing changes on " + this.tagName);
    observer.observe(this, config);
});

Answer 1

经过数小时的代码研究，找到了解决方案。我检查了postWidgetLoad使用setTimeout调用的位置。

这里是应用的逻辑。

由于我在等待列表部分添加了新的类hc-button，因此请检查该类是否存在。如果没有，则调用postWidgetLoad函数，否则，由于已经创建了该类，因此循环将停止执行。

DOM MutationObserver问题-Javascript

1 个答案: