Question

我的目标是通过单击按钮使多个div可编辑。有没有办法通过使用类而不是ID来做到这一点？我希望能够将可编辑的类添加到我的网站中的多个div。是否有适合此任务的插件或模块？我不想在浏览器中编辑代码或格式，仅限文本内容。你的想法？

测试测试测试1 测试测试测试2 测试测试测试3

<script>
    var editorBtn = document.getElementsByClassName('editBtn');
    var element = document.getElementsByClassName('editable');

    editorBtn.addEventListener('click', function(e) { 
        e.preventDefault();

        if (element.isContentEditable) {
        element.contentEditable = 'false';
        editBtn.innerHTML = 'update';

      } else {
        element.contentEditable = 'true';
        editBtn.innerHTML = 'done';
        }
    });
</script>

Answer 1

getElementsByClassName将返回一个数组。您可能希望通过ID访问您的按钮，并通过类访问元素。

<script>
 var editorBtn = document.getElementById('editBtn');



 editorBtn.addEventListener('click', function(e) { 
    e.preventDefault();
    var elements = document.getElementsByClassName('editable');
    for(var i =0;i<elements.length;i++){
     if (elements[i].isContentEditable) {
      elements[i].contentEditable = 'false';
      editBtn.innerHTML = 'update';
     } else {
      elements[i].contentEditable = 'true';
      editBtn.innerHTML = 'done';
     }
    }
 });
</script>

你应该把editBtn.innerHTML拉到循环之外，但是，既然你让它们都可以编辑，或者所有都不可编辑，那么它应该按原样运行。

为您的心灵内容添加'可编辑'课程。

编辑：以上只是如何将属性修改为具有给定类名的元素（可编辑）的示例。

，无法保证您正在修改的属性是否达到了使元素允许/禁止编辑的目标。

Answer 2

如果要将类添加到一组div或元素中，请使用Jquery

$(".classToSelect").addClass("classToInsert")

如果这不是您想要的，请填写您的问题

Javascript中的内容可编辑按钮适用于班级

2 个答案: