时间戳

首页 > 解决方案 > 突出显示 Woocommerce 元素的 Javascript 函数。使用 querySelector() 的问题

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

问题描述

我既不是 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()之前使用几乎相同的方式并且效果很好，但我收到了错误

未捕获的类型错误：subcat.css 不是函数

我的猜测是，所有这些 jquery-document-querySelector 东西的用法都是错误的。我将非常感谢一些建议如何使这项工作。或者，一般来说，Wordpress 是否有更好的方法？！提前致谢

标签： javascriptphpjquerycsswordpress

解决方案

那是因为subcat实际上是 a HTMLElement，因为它是从NodeList本地document.querySelectorAll()方法返回的。它不是一个 jQuery 对象，所以你不能在它上面使用 jQuery 方法。

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

subcat.style.color = 'white';

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

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

推荐阅读