Javascript функция для выделения Woocommerce-элементов. Проблемы с использованием querySelector ()

Question

Я не эксперт ни в PHP, ни в frontend- Javascript, ни в Wordpress. Но меня попросили взглянуть на кого-то в онлайн-магазине. Я должен выделить соответствующую подкатегорию при просмотре продукта внутри виджета подкатегории. Проблема здесь: один продукт, конечно, может иметь несколько подкатегорий, соответствующих тем, которые находятся внутри виджета. Поэтому меня попросили просто выделить тот, который упоминается в сухарях. Так что я знаю, что это не очень хороший способ найти HTML -элементы по их внутреннему HTML, но я не мог найти лучший способ. В конце концов, это все равно не работает.

Здесь вы можете найти пример продукта магазина.

До сих пор мой подход заключался в добавлении этого к функциям. 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 не является функцией

Я предполагаю, что неправильно использовать все эти вещи jquery -document-querySelector. Я был бы очень благодарен за некоторые советы, как сделать эту работу. Или, может быть, есть лучший подход к Wordpress вообще ?! Заранее спасибо

Answer 1

Это связано с тем, что subcat на самом деле является HTMLElement, поскольку оно получается из NodeList, возвращенного нативным методом document.querySelectorAll(). Это не объект jQuery, поэтому вы не можете использовать методы jQuery для него.

Самый простой способ - это установить CSSStyle изначально, то есть:

subcat.style.color = 'white';

... или преобразовать его в jQuery объект для доступа к jQuery .css() методу:

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