问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

无法在文档上执行查询选择器，id 不是有效的选择器

社区维基
1
新手上路，请多包涵

我正在尝试创建一种方法来编辑一堆评论并通过我可以生成的一些 ID 来识别它们。我遇到的错误是：

语法错误：无法在“文档”上执行“querySelector”：“#1234”不是有效的选择器。但是，我看不出这是怎么可能的，因为我在 id=1234 <p> 。

此外，还有一些问题，当我评论其他所有内容并执行 alert(id) 时，这对第二种形式不起作用，错误是：

类型错误：无法读取 null 的属性“classList”。

这是在 jfiddle 中： https ://jsfiddle.net/wafqgq0L/2/

 document.querySelector('.editable').addEventListener('click', function(event) {
 var index = event.target.id.indexOf('_');

 var id = event.target.id.substring(0,index);

	//actual data
	document.querySelector('#'+id).classList.add('hidden');

  //edit button
  document.querySelector("#"+id+"_edit").classList.add('hidden');

  //textarea
	document.querySelector("#"+id+"_editable").classList.remove('hidden');

  //save button
	document.querySelector("#"+id+"_save").classList.remove('hidden');

});

 .hidden {
  display: none;
}

 //all id will be like 12345_comment

<div class="editable">
<p id="1234">
  Some comment
</p>

<form action="form.php" method="post">
  <textarea id="1234_editable" class="hidden">Some comment</textarea>
  <a href="#" id="1234_edit">Edit</a>
  <a href="#" id="1234_save" class="hidden">Save</a>
</form>
</div>
<br><br>
<div class="editable">
<p id="123">
  Some comment
</p>

<form class="editable" action="form.php" method="post">
  <textarea id="123_editable" class="hidden">Some comment</textarea>
  <a href="#" id="123_edit">Edit</a>
  <a href="#" id="123_save" class="hidden">Save</a>
</form>
</div>

原文由 user4634820 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascripthtmlcss
阅读 484
2 个回答
得票最新
社区维基
1
✓ 已被采纳

您可能会发现 jQuery 更简单，并且它会自动跨浏览器（并且输入速度更快！）因为它已标记在您的问题上，所以这里是 jQuery 解决方案：

编辑：标签 jQuery 于 2019 年 5 月 25 日 21:10（问题被问及回答后 3 年），由用户 John 从原始问题中删除，带有莫名其妙的编辑评论“删除垃圾邮件标签”。

jsFiddle 演示

$('[id^=edit_]').click(function(){
    var id = this.id.split('_')[1];
    $('#'+id).addClass('hidden');
    $('#edit_'+id).addClass('hidden');

    $('#save_'+id).removeClass('hidden');
    $('#editable_'+id).removeClass('hidden');
});

$('[id^=save_]').click(function(){
    var id = this.id.split('_')[1];
    $('#'+id).removeClass('hidden');
    $('#edit_'+id).removeClass('hidden');

    $('#save_'+id).addClass('hidden');
    $('#editable_'+id).addClass('hidden');
});

请注意，我调换了 idnumber 和 idName 前缀。这使得使用 starts with 选择器更容易定位这些元素： id^=

原文由 cssyphus 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

如果使用 HTML4 id s 必须以字母开头 ( https://www.w3.org/TR/html4/types.html#type-id )

如果使用 HTML5，您可以使用数字。

将您的 id s 更改为以字母开头（如 id="p12345" ）或使用 HTML5（即使用 <!DOCTYPE html> 文档）

原文由 blurfus 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题