点击高亮显示？

Question

在页面上有两个框 这两个框是一个数组的数据类似与
[

[
    {
        x:'1',
        y:'2'
    },
    {
        x:'1',
        y:'2'
    }
]

这种格式的我去循环然后画的框 想要实现无论点击这两行哪行 这两行都高亮显示

用过根据id查找页面元素，但id只能返回第一个所以只能第一个高亮

const svg = document.getElementById('targetSvg' + num)

result.value.forEach((item, index) => {
  if (item.target.position[0].pageNum == num) {
    isLine(item.target.position).forEach((ite) => {
      let rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect')
      svg!.appendChild(rect)
      rect.setAttribute('x', (ite.startX * scaleView) / targetScale.value + '')
      rect.setAttribute('y', (ite.y * scaleView) / targetScale.value + '')
      rect.setAttribute(
        'width',
        Math.abs(((ite.endX - ite.startX) * scaleView) / targetScale.value) + ''
      )
      rect.setAttribute('height', (ite.h * scaleView) / targetScale.value + '')
      rect.setAttribute(
        'stroke',
        item.compare_result == 'del'
          ? '#ff827f'
          : item.compare_result == 'add'
          ? '#68a34c'
          : item.compare_result == 'convert'
          ? '#ffd692'
          : ''
      )
      let rectHandW = {
        x: (ite.startX * scaleView) / targetScale.value,
        y: (ite.y * scaleView) / targetScale.value,
        w: Math.abs(((ite.endX - ite.startX) * scaleView) / targetScale.value),
        h: (ite.h * scaleView) / targetScale.value
      }
      targetRectStyle.value.push(rectHandW)
      rect.setAttribute('stroke-width', '1')
      rect.setAttribute('fill', 'transparent')
      rect.setAttribute('cursor', 'pointer')
      rect.id = 'targetrect' + (index + 1)

Answer 1

用 class？或者用属性选择器