Question

嘿所以我有一个难以解决的难题。

所以我有一个PDB（蛋白质类型文件）文件，我正在加载数据。我抓住蛋白质的序列，然后在用户单击按钮时用序列填充div文件。

基本上是＃34;用户点击＆＃34;

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>

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

1 个答案: