Question

前段时间，我编写了以下代码以在html页面上显示某些项目：

<div id="gameField">
@foreach (var item in Model.Characters)
{
    <div class="char" id="@item.Id"  onclick="ShowDropDown(event,this.id)">
        <img src="~/Content/Images/Characters/@item.ImageSource" class="character" alt="Character" />
        <img src="~/Content/Images/Cross.png" class="cross" alt="Cross" />
        <p>@item.Name</p>
    </div>
}
<div id="myDropdown" class="dropdown-content">
    <a href="#" onclick="Flip()">Flip</a>
    <a href="#" onclick="Highlight()">Highlight</a>
    <a href="#" id="Guess" >Guess</a>
    <a href="#" class="red" onclick="Hide()">Hide</a>
</div>

id是0到24之间的数字。

具有以下JavaScript代码：

function ShowDropDown(event, clicked_id) {
        var Dropdown = document.getElementById("myDropdown");
        var x = event.clientX;
        var y = event.clientY;
        id = clicked_id;
        Dropdown.style.top = (y + 10) + 'px';
        Dropdown.style.left = (x + 10) + 'px';
        Dropdown.classList.toggle("show");
}

window.onclick = function (event) {
if (!event.target.matches(id)) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
        var openDropdown = dropdowns[i];
        if (openDropdown.classList.contains('show')) {
            openDropdown.classList.remove('show');
        }
    }
}
}

现在，每次我单击一个项目时，都会在控制台中收到以下错误消息：

未捕获的DOMException：无法对“元素”执行“匹配”：'13'不是有效的选择器。在window.onclick（http://localhost:58203/Game?newgame=True&gameId=0&mode=2:131:31） window.onclick @ Game？newgame = True＆gameId = 0＆mode = 2：131

当我单击其他项目时，课程13会更改。事实是，代码有效，但是此错误消息仍显示在控制台中，我也尝试过在id前面放置一个字符，但错误消息仍然出现

Answer 1

.matches(selector)应该具有CSS选择器，因此您应该在ID之前添加#：

if (!event.target.matches('#' + id)) {

但是，ID不能只是一个数字，因此您还必须在ID的数字前附加一个字符，以使其正常工作。

查看更多：https://developer.mozilla.org/en-US/docs/Web/API/Element/matches

Answer 2

我单独使用数字作为 ID 值。

我创建了一个字母数字 ID，然后查询就成功了。

显然，CSS ID 选择器不允许以数字字符开头。

现在进行快速搜索，我无法在 MDN 文档或其他任何内容中找到源，但 CSS Tricks 可以帮助您找到更多信息。

无法对元素执行匹配：无效的选择器

2 个答案: