javascript - 引用具有多个变量的 HTML ID

Question

因此，我正在尝试创建一个游戏，其中包含从服务器发送的关卡中的 block 。

每次从服务器收到更新时，我都会循环遍历 block 。如果该 block 是固定的，那么它将将该 block 附加到 html 文档(如果该 block 尚不存在)。

if(blocks[blockCount].solid === true){
            if($("#" + blocks[blockCount].posX.toString() + "," + blocks[blockCount].posY.toString()).length > 0){
               alert("Block already exists");
            }else{
                $("body").append("<div style='height: " + blockSize + "px;width:  " + blockSize + "px;background-color: blue;position: absolute;display: inline;margin-left: " + blocks[blockCount].posX * blockSize + "px;margin-top: " + blocks[blockCount].posY * blockSize + "px;' id='" + blocks[blockCount].posX.toString() + "," + blocks[blockCount].posY.toString() + "'> </div>");
            }
        }

blocks[blockCount].posX 和 Y 都应该等于 4。但是由于某种原因它们不断被创建，if 语句由于某种原因不起作用。你能解释一下为什么吗？或发布正确的代码。非常感谢你的帮助。 :)

我在这里学到:How to check if element exists in the visible DOM?

jquery .length 可以让我查看该元素是否已经存在。

Answer 1

你不能在 ID(或类中)使用 , [请参阅评论，你可以，但为什么要让自己的生活变得艰难] - 因为 , 在 CSS 中用作分隔符..即

#id1,div 将选择 id="id1"的元素以及任何 div

您正在创建 ID 类似于“123,456”的元素 - 作为 CSS 选择器，它是 #123,456

解决方案:尝试使用 _ 代替 ,

另外，我不确定是否允许 id 以数字开头，但请不要完全理解我，如果不允许，只需在您的 id 前面添加 x 或其他内容即可

注意:HTML5 规范允许 ID 以数字开头，但是，这在 CSS 选择器中也不起作用(至少对于 CSS 来说，未使用 jQuery 或 querySelector[All] 进行测试)

您最终会得到类似于 x123_456 的 id - 没关系