javascript - 在 JavaScript 中创建一个可点击的数组

Question

嘿，我有一个难题想解决。

所以我有一个 PDB(蛋白质类型文件)文件，我正在其中加载数据。我正在获取蛋白质的序列，然后在用户单击按钮时用该序列填充一个 div 文件。

所以基本上是“用户点击”

ASDJASDJAKJFSAKDBSKJDBKAJBSDKJFBAKJSBFKJBSKJABFJSABKFAKJBF

序列出现了。我希望用户做的是，当用户单击此序列中的一个元素时，它会相应地突出显示蛋白质。我遇到的问题是使数组可点击并试图弄清楚如何做到这一点。

var sequencePdb = [];
document.getElementById("sequence-label").style.visibility = 'visible';
var f = "";
var rawFile = new XMLHttpRequest();
rawFile.open("GET", urlPdb, true);
rawFile.onreadystatechange = function () {

    if(rawFile.readyState === 4) {
        if(rawFile.status === 200 || rawFile.status == 0) {
            f = rawFile.responseText;
            var lines = f.split('\n');

            for (var line = 0; line < lines.length; line++){
               var recordName = lines[line].substr(0, 6);
                var atomName = lines[line].substr(12, 3);
                if (recordName === 'ATOM  ' && atomName === " CA") {
                    var sequenceData = lines[line].substr(17, 3);
                    sequencePDB.push(sequenceDataList[sequenceData]);
                };
            };

            var sequenceLabel = document.getElementById("sequence-label");
            sequenceLabel.innerHTML = sequencePDB.join("");

        };
    };

};

HTML 文件

       <div id = "sequence-label" class="scrollingDiv"  >
        </div>

到目前为止，我已经尝试通过添加事件监听器使数组中的每个元素成为可点击的项目，但它没有显示我的警报消息。所以我想知道是否有办法使这成为可能。我认为 innerHTML 将其转换为字符串，因此在读取它时，它不会获取数组内的元素。所以这就是我被困的地方。

Answer 1

以下是如何仅使用一个事件监听器使每个单独的序列可点击:

var sequencePdb = ["want", "these", "to", "be", "clickable"];

// just pretend we got the data from the XHR
(function() {
  var sequenceLabel = document.getElementById("sequence-label");
  
  // wrap each sequence in a span
  sequencePdb.forEach(function(pdb) {
    var span = document.createElement('span');
    
    // use textContent instead of innerHTML to avoid XSS attacks!
    span.textContent = pdb;
    
    sequenceLabel.appendChild(span);
  });
  
  // only need one event listener
  sequenceLabel.addEventListener('click', function(event) {
    // rule out the #sequence-label itself if it was clicked directly
    if (event.target !== this) {
      // event.target is span, textContent is string value
      console.log(event.target.textContent);
    }
  });
}());

<div id="sequence-label" class="scrollingDiv"></div>