按类抓取元素，然后进行更改。 -Shopify / Plugin

Question

我的shopify商店需要一点帮助。我正在尝试更改按钮的类，以便将其样式从默认类“ btn”更改为“ askAQButton”。但是，按钮的代码根本不在标记中，因此我只能假定它们是由shopify插件本身的JS生成的。

我认为这应该很简单，而且我应该能够通过jquery的“ id”来定位元素并更改类。但是，该按钮没有ID，而href ...

也没有

我的下一个想法是好的，请通过id定位父div，然后定位按钮和href的类，并以这种方式进行更改（以避免定位重复的类）。

我似乎无法正常工作。

这是我在商店页面上实现此标记的全部标记：

很明显，它是不相关的（可能是除父div以外的所有内容，但是，当我在实现此代码后加载页面时，它会自动在第二个输入下生成此权限：

<div class="wk-ask-order">
  <button class="wk-ask-a-question-order btn" style="display: inline-block;">Raise a Query
  </button>
  <a href="/pages/ask-a-question/orders" target="_blank" class="view-customer-queries btn">View Your Queries</a>
</div>

有人可以帮助我定位它并更改班级名称。

Answer 1

我不确定我是否正确解决了这个问题，但是当脚本将其作为目标时，按钮可能尚未被注入DOM可能存在问题。在执行代码之前，请尝试等待DOMContentLoaded事件：

document.addEventListener('DOMContentLoaded', () => {
    const askAQBtn = document.querySelectorAll('.wk-ask-a-question-order')[0]; //there's probably a better selector
    askAQBtn.classList.replace('btn', 'askAQButton');
});

如果不起作用，请查看MutationObserver以等待特定元素的存在。我在Github上找到了一个摘要：

https://gist.github.com/jwilson8767/db379026efcbd932f64382db4b02853e

Answer 2

这是我的回答，有点低调，但我希望它能为您提供一些有用的工作。我遵循了您关于父级div ID的想法。

let parent = document.getElementById('wk-askme');
let child_nodes = parent.childNodes;

for (let i = 0; i < child_nodes.length; i++) {
  let item = child_nodes[i];
    if ($(item).attr('class') == "wk-ask-a-question-order btn") {
        $(item).attr('class', 'wk-ask-a-question-order askAQButton');
    }
}