我正在尝试创建一种编辑一堆注释的方法,并通过我可以生成的一些id来识别它们.我遇到的错误是:
SyntaxError:无法在'Document'上执行'querySelector':'#1234'不是有效的选择器.不过,我看不出这是可能的,因为我已清楚id=1234的<p>.
此外,还有一些问题,当我评论其他所有内容并执行警报(id)时,这不适用于第二种形式,错误是:
TypeError:无法读取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>blu*_*fus 12
如果使用HTML4 id必须以字母开头(https://www.w3.org/TR/html4/types.html#type-id)
如果使用HTML5,您可以使用数字.
将ids 更改为以字母开头(如id="p12345")或使用HTML5(即<!DOCTYPE html>在文档顶部使用)
小智 7
您可以为此使用模板字符串文字，因为 id 必须用引号引起来，否则它将不起作用，并确保在文档顶部使用 HTML5。有了这个，我没有更多的问题。
例如：
document.querySelector(`[data-id="${id}" ]`);
或者，如果出于任何原因您不想使用模板文字，请添加以下代码行：
document.querySelector("[data-id=" + "\'" + id + "\'" + "]");
\'在双引号中带有转义字符。
希望这可以帮助。
您可能会发现 jQuery 更容易，并且它会自动跨浏览器（并且输入速度更快！）因为它已标记在您的问题上，所以这是 jQuery 解决方案：
jQuery已于 2019 年 5 月 25 日 21:10（问题提出并回答 3 年后）从原始问题中删除，用户John带有莫名其妙的编辑评论“删除垃圾邮件标签”。$('[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');
});
请注意，我交换了 id_number 和 idName_ 前缀。这使得使用starts with选择器定位这些元素变得更加容易：id^=