Question

我想创建一个包含大量可编辑单词的文本字段。每个单词应该能够有不同的颜色。我还需要对每个单词进行一些其他的CSS更改，例如改变每个单词的字体。

我有一个javascript数组中的单词列表。我在一个令人满意的div里面做了很多跨越。我循环遍历数组并使用javascript将每个单词分配给每个跨度。

然而，当我有很多单词时，div中的滚动变得很慢。有谁知道如何解决这一问题？或者有其他解决方案？

HTML：

 <div contenteditable id="editor">

    </div>

JS：

var text = ['one', 'two', 'three'];


function printwords(){
      for (var i = 0, len = text.length; i < len; i++){
          var dataSpan = document.createElement('span');
          document.getElementById('editor').appendChild(dataSpan);
          dataSpan.setAttribute("id", i+"id");
          $('#'+i+'id').css('background', 'rgba(255, 0, 0, 0.5)');
          document.getElementById(i+'id').innerHTML = text[i]+' ';
      };
    };
    printwords();

Answer 1

您的实际代码存在一些问题：

您正在创建一个span元素，将其附加到editable div然后为其提供更多属性，或者编辑它的属性，更好的方法是创建元素，然后更改其属性最后将它添加到DOM。
您正在创建该元素，并为其提供id，然后您将使用id和$('#'+i+'id')两次给定的document.getElementById()来获取该元素，您是在这里过度填充您的网页，您已经在变量中包含了元素，为什么要再次尝试通过id获取该元素，只需使用您的dataSpan变量。

所以你的实际代码工作正常，但是数组中的项目数量很多，会产生糟糕的性能，那就是 div中的滚动变得很慢。

这应该是你的代码：

function printwords() {
  for (var i = 0, len = text.length; i < len; i++) { 
    var dataSpan = document.createElement('span');
    dataSpan.setAttribute("id", i + "id");
    dataSpan.style.background = 'rgba(255, 0, 0, 0.5)';
    dataSpan.innerHTML = text[i] + ' ';

    document.getElementById('editor').appendChild(dataSpan);
  };
};

<强>演示：

var text = ['one', 'two', 'three'];


function printwords() {
  for (var i = 0, len = text.length; i < len; i++) { 
    var dataSpan = document.createElement('span');
    dataSpan.setAttribute("id", i + "id");
    dataSpan.style.background = 'rgba(255, 0, 0, 0.5)';
    dataSpan.innerHTML = text[i] + ' ';

    document.getElementById('editor').appendChild(dataSpan);
  };
};
printwords();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div contenteditable id="editor">

</div>

在一个可信的div里面有很多span标签

1 个答案: