javascript - 试图用js将属性设置为数组中的一项，但DOM改变了所有

Question

我有这个数组:

    var syncData = [
              {"end": "1.130","start": "0.849","text": "I'm" },
              {"end": "1.390","start": "1.140","text": "seeing" ,"class": "alert"},
              {"end": "4.009","start": "3.449","text": "something" }]

我在“seeing”中添加了该类，因为我想更改转录中该单词的样式，与音频同步(与数组中的其他字段一样，以秒为单位查看开始和结束时间)。也就是说，当说出“看到”时，我希望背景突出显示。

我尝试添加

    element.setAttribute("class", "alert");

但是当我这样做时，我在 DOM 中看到所有东西都归属于该类。这是完整的代码，当前突出显示了所有单词，我尝试注释掉的内容:

    ( function(win, doc) {
        var audioPlayer = doc.getElementById("audiofile");
        var subtitles = doc.getElementById("subtitles");
        var syncData = [
             {"end": "1.130","start": "0.849","text": "I'm" },
              {"end": "1.390","start": "1.140","text": "seeing" ,"class": "alert"},
               {"end": "4.009","start": "3.449","text": "something" }

            ];
        createSubtitle();

        function createSubtitle()
        {
            var element;
            for (var i = 0; i < syncData.length; i++) {
                element = doc.createElement('span');
                element.setAttribute("id", "c_" + i);
                //element.setAttribute("class", "alert");
                element.innerText = syncData[i].text + " ";
                subtitles.appendChild(element);

            }

        audioPlayer.addEventListener("timeupdate", function(e){
            syncData.forEach(function(element, index, array){

                 if( audioPlayer.currentTime >= element.start && audioPlayer.currentTime <= element.end )
                    subtitles.children[index].style.background = 'yellow';
                // var x = subtitles.children[index].getElementsByClassName("alert");
                // var j;
                // for (j = 0; j < x.length; j++) {
                // if( audioPlayer.currentTime >= element.start && audioPlayer.currentTime <= element.end )
                //     x[j].style.backgroundColor = 'yellow';
                // else if (audioPlayer.currentTime > element.start && audioPlayer.currentTime > element.end )
                //     x[j].style.backgroundColor = 'DarkGrey'; }
                //if (audioPlayer.currentTime >= element.start && audioPlayer.currentTime <= element.end )
                    //subtitles.children[index].getElementsByClassName("alert").style.background = "yellow"; 

Answer 1

试试这个:

for (var i = 0; i < syncData.length; i++) {
  element = doc.createElement('span');
  element.setAttribute("id", "c_" + i);
  if(syncData[i].class) element.setAttribute("class", syncData[i].class); // see this line
  element.innerText = syncData[i].text + " ";
  subtitles.appendChild(element);
}