用于突出显示 Woocommerce 元素的 Javascript 函数。使用 querySelector() 的问题

Question

我既不是 PHP、前端 JavaScript 也不是 Wordpress 方面的专家。但有人要求我查看某人的网上商店。在查看产品时，我应该在子类别小部件内突出显示相应的子类别。这里的问题是:一个产品当然可能有几个子类别，与小部件内的子类别相匹配。所以我被要求只突出显示面包屑中提到的那个。所以我知道通过 innerHTML 来定位 HTML 元素并不是一个很好的方法，但我真的找不到更好的方法。到最后无论如何它都不起作用。

在这里您可以找到商店的示例产品。

到目前为止，我的方法是将其添加到我们子主题的functions.php中:

function highlight_subcat()
{
    if (is_product()) {
        ?>
        <script type="text/javascript">

            jQuery(document).ready(function ($) {

                var subcategories = document.querySelectorAll("[class^=menu-item-] a");
                var breadcrumbString = document.querySelector("#main > div:nth-child(1) > nav > a:nth-child(3)").innerHTML;

                subcategories.forEach(function (subcat) {
                    if (subcat.innerHTML.localeCompare(breadcrumbString))
                        subcat.css("color", "white");
                });

            });
        </script>
        <?php
    }
}

add_action('wp_head', 'highlight_subcat');

尽管我之前使用 css() 的方式几乎相同并且工作正常，但我收到了错误

Uncaught TypeError: subcat.css is not a function

我的猜测是，所有 jquery-document-querySelector 内容的使用都是错误的。我将非常感谢您提供一些如何使这项工作有效的建议。或者也许 WordPress 有更好的方法？提前致谢

Answer 1

这是因为 subcat 实际上是一个 HTMLElement，因为它是从原生 document.querySelectorAll 返回的 NodeList 获取的() 方法。它不是 jQuery 对象，因此您不能对其使用 jQuery 方法。

最简单的方法是实际设置 CSSStyle，即:

subcat.style.color = 'white';

...或者将其转换为 jQuery 对象以访问 jQuery 的 .css() 方法:

$(subcat).css('color', 'white');