如何为不同的类调用 querySelector？ [关闭]

Posted 2023-03-27

【中文标题】如何为不同的类调用 querySelector？ [关闭]

【英文标题】：How to call querySelector for different class? [closed]

【发布时间】：2021-01-22 12:31:11

【问题描述】：

需要制作一个以 JSON 格式从 API 获取数据的 webpart。我从 JSON 生成一个带有项目编号的表。然后我将每个 td 更改为与 class="project_number" 链接。

现在每个职位都有其特定的类别。不，我需要每个链接都指向项目详细信息 ot url，例如：https://XXX.azurewebsites.net/api/protocollines?protocolNo=PR0002

我不知道应该在 querySelector 中放置什么参数才能为每个链接添加 addEventListener。

document.querySelector("???").addEventListener('click', *function*);

  function changeToLink()
    var tableCells = Array.from(document.getElementsByTagName('td'));
    var i;    
    var proNo = "PR0";
        
     for (i=0; i<tableCells.length; i++ && isContains == true) 
      var proFromArray = tableCells[i].innerhtml;
      var isContains = proFromArray.includes(proNo);    

      if(isContains == true)
        var tdElement = document.getElementsByTagName('td')[i];
        console.log('Profrom: ' + proFromArray);
        tdElement.innerHTML = `<a class="$proFromArray" href='https://XXX.azurewebsites.net/api/protocollines?protocolNo=$proFromArray'>$proFromArray</a>`
      
     
    
  
 document.querySelector(`??`).addEventListener('click', *function*); 

【参考方案1】：

有几种方法可以做到这一点。

选项1

您可以使用JS创建锚元素，并在创建每个元素时添加onclick事件，例如：

// inside the if(isContains == true)
var a = document.createElement('a');
a.className = proFromArray;
a.href = `https://XXX.azurewebsites.net/api/protocollines?protocolNo=$proFromArray`;
a.textContent = proFromArray;
a.onclick = this.getJsonData;

我创建了一个 Fiddle 来演示它是如何工作的：https://jsfiddle.net/brettnolf/f3xd7ag1/

选项 2

现在，如果您需要以字符串的形式创建它，然后在您创建的内容上调用querySelector，您可以为每个锚标记添加相同的类：

tdElement.innerHTML = `<a class="$proFromArray pro-elem" href='https://XXX.azurewebsites.net/api/protocollines?protocolNo=$proFromArray'>$proFromArray</a>`

然后添加事件监听器，如：

var pros = document.querySelectorAll('.pro-elem')
for (var i = 0; i < pros.length; i++) 
    pros[i].addEventListener(this.getJsonData);

选项 3

如果这两种解决方案都不可行，您可以使用查询选择器通配符并添加类似于上述的事件侦听器：

var pros = document.querySelectorAll('[class^=PR0]')
// or if you wanted to be really specific:
// document.querySelectorAll('td a[class^=PR0]')
for (var i = 0; i < pros.length; i++) 
    pros[i].addEventListener(this.getJsonData);

如果您在此处拉起 Chrome 开发工具 https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll 并在控制台中输入 document.querySelectorAll('[class^=title]')，您可以看到最后一个解决方案。

请注意，最后两个选项只有在元素被添加到 DOM 之后才有效。在第一个选项中，您在创建元素时添加侦听器，因此您可以即时执行。