Javascript 未能对元素执行匹配：不是有效的选择器

不久前，我编写了以下代码来显示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>

@foreach（Model.Characters中的变量项）
{
@项目名称

}

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');
        }
    }
}
}

函数显示下拉列表（事件，单击\u id）{
var Dropdown=document.getElementById（“myDropdown”）；
var x=event.clientX；
var y=event.clientY；
id=单击的\u id；
Dropdown.style.top=（y+10）+“px”；
Dropdown.style.left=（x+10）+“px”；
下拉列表.classList.toggle（“显示”）；
}
window.onclick=函数（事件）{
如果（！event.target.matches（id））匹配{
var dropdowns=document.getElementsByClassName（“下拉内容”）；
var i；
对于（i=0；i

现在，每次单击某个项目时，控制台中都会显示以下错误消息：

未捕获的DomeException:未能对“元素”执行“匹配”：“13”不是有效的选择器。 在window.onclick（）处 window.onclick@Game？newgame=True&gameId=0&mode=2:131

当我点击一个不同的项目时，13当然会改变。 问题是，代码可以工作，但是这个错误消息仍然显示在控制台中，我也尝试在id前面添加一个字符，但是错误消息仍然出现。

。匹配（选择器）

应该得到一个CSS选择器，所以您应该在id之前添加一个

：

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

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

请参阅更多信息：

.matches（选择器）

应该获得CSS选择器，因此您应该在ID之前添加一个

：

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

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

---

查看更多信息：

我只使用了一个数字作为ID值

我创建了一个字母数字ID，然后查询开始了

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

---

现在快速搜索，我无法在MDN文档或任何东西中找到源代码，但可以帮助您找到更多信息。

我仅使用数字作为ID值

我创建了一个字母数字ID，然后查询开始了

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

---

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

谢谢您的回答，将我的javascript更改为您的示例并在id前面添加一个字符后，错误仍然存在：未能在“元素”上执行“匹配”：“a 3”不是有效的选择器。这是因为您的id中似乎有一个空格，它应该是

id=”a@item.Id而不是
id=“a@item.id”
。但是razor不允许我在@item.idAh前面加上“a”，我的坏朋友。它是否允许
id=“a@{item.id}”
？它确实允许，但错误消息更改为：未能对“Element”执行“matches”：“#a{12}”不是有效的选择器。感谢您的回答，将我的javascript更改为您的示例并在id前面添加一个字符后，错误仍然存在：未能在“元素”上执行“匹配”：“a 3”不是有效的选择器。这是因为您的id中似乎有一个空格，它应该是
id=”a@item.Id而不是
id=“a@item.id”
。但是razor不允许我在@item.idAh前面加上“a”，我的坏朋友。它是否允许
id=“a@{item.id}”
？它确实允许，但错误消息更改为：未能对“Element”执行“matches”：“#a{12}”不是有效的选择器。