点击高亮显示?

作者站长头像
站长
· 阅读数 13

点击高亮显示? 在页面上有两个框 这两个框是一个数组的数据类似与[

[
    {
        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)
回复
1个回答
avatar
test
2024-06-23

用 class?或者用属性选择器

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容