Javascript函数来突出显示元素。使用querySelector（）时出现问题

我既不是PHP专家，也不是前端Javascript专家，也不是Wordpress专家。但有人让我去网上商店看看。在查看产品时，我应该在子类别小部件中突出显示相应的子类别。这里的问题是：一个产品当然可能有几个子类别，与小部件内部的子类别相匹配。所以我被要求只突出显示面包屑中提到的那个。所以我知道，通过它们的内部HTML来定位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');

函数高亮显示_subcat（）
{
if（is_product（））{
?>
jQuery（文档）.ready（函数（$）{
var subcategories=document.queryselectoral（“[class^=菜单项-]a”）；
var breadcrumbString=document.querySelector（“#main>div:nth child（1）>nav>a:nth child（3）”）.innerHTML；
子类别。forEach（函数（子类别）{
if（subcat.innerHTML.localeCompare（breadcrumbString））
子类别css（“颜色”、“白色”）；
});
});
这是因为
subcat
实际上是一个
HTMLElement
，因为它是从本机
文档返回的
NodeList
中获取的。querySelectorAll（）
方法。它不是一个jQuery对象，因此不能对其使用jQuery方法

最简单的方法是以本机方式实际设置CSSStyle，即：

subcat.style.color = 'white';

…或将其转换为jQuery对象以访问jQuery的
.css（）
方法：

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

这是因为
subcat
实际上是一个
HTMLElement
，因为它是从本机
文档返回的
NodeList
中获取的。querySelectorAll（）
方法。它不是一个jQuery对象，因此不能对其使用jQuery方法

最简单的方法是以本机方式实际设置CSSStyle，即：

subcat.style.color = 'white';

…或将其转换为jQuery对象以访问jQuery的
.css（）
方法：

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

解决了。也帮了我很多了解。谢谢！解决了。也帮了我很多了解。谢谢！