Question

我正试图像reddit这样的孩子隐藏评论，并且编写了此功能：

function toggle(id, lft, rgt) {
    var kids = (rgt - lft - 1) / 2;
    if (kids >= 1) {
        var element = document.querySelector("div.com#com" + id).getAttribute('value');
        var low = Number(element.split('-')[0]);
        var high = Number(element.split('-')[1]);
        for (var i = low + 1; i <= high - 1; i += 1) {
            const x = document.querySelectorAll('div.com[min=' + i + ']');
        }
        Array.from(x).forEach(comment => {
            if (comment.style.display === "none") {
                comment.style.display = "block";
            } else {
                comment.style.display = "none";
            }
        });
    }

例如，这是父注释：

<div> 
      <a onclick="return toggle(1, 1, 4)" href="javascript:void(0)">[-]</a>
       <div id="com1" class="com md" value="1-4" min="1">yellow</div>
</div>

这是孩子的评论：

<div> 
     <a onclick="return toggle(2, 2, 3)" href="javascript:void(0)">[-]</a>
    <div id="com2" class="com md" value="2-3" min="2">hello </div>
</div>

我想隐藏所有在父值1和4之间具有min属性的注释，而这个子项的min = 2，因此必须将其隐藏。但是js函数无法正常工作，这是什么问题？？

其他问题？

我应该在foreach中写上for loop还是可以的这样吗？
如果标题中的错误已修复，该功能将起作用并且子注释将被隐藏，如果不是，为什么？

谢谢：）

Answer 1

好吧，正如错误消息所述，您的选择器无效。在属性的值周围添加引号。

const x = document.querySelectorAll(`div.com[min="${i}"]`);

（使用ES6模板文字看起来更具可读性）。

如何解决此错误“未捕获的DOMException：无法在'Document'上执行'querySelectorAll'：'div.com [min =]'不是有效的选择器”？

1 个答案: