时间戳

首页 > 解决方案 > 将点击高亮（CSS 类）复制到多个 SVG 中的相应元素

javascript - 将点击高亮（CSS 类）复制到多个 SVG 中的相应元素

问题描述

我有两个具有相同元素的 SVG。当我单击 SVG1 上的元素时，它通过切换 CSS 类突出显示。我希望自动突出显示 SGV2 上的相同元素（注意：稍后，我希望能够通过单击 SVG2 来更改 SVG2 上突出显示的内容）。

我试过制作一个转换表，所以当我使用 getElementById 捕获 SVG1 点击时，该 ID 将转换为 SVG2 上的相应 ID，然后应用 CSS 类，但这不起作用。关于我应该如何做到这一点的任何建议？

这是一个 JSfiddle - https://jsfiddle.net/scottmclaughlin/gynzou0t/21/

    // changes colour of the clicked element
function highlighter () {
        var ellipses = document.getElementById(this.id);
        ellipses.classList.toggle("keyHighlight");

    // also duplicate highlight on second svg
     let duplicateEllipses = (ellipses) => translateTable[ellipses];
      duplicateEllipses.classList.toggle("keyHighlight1");
    }

不相关，SVG 应该并排，但由于某种原因列/行 CSS 不正确。

标签： javascriptcsssvg

解决方案

ellipses是一个元素而不是一个id，你的duplicateEllipses用法很奇怪，它被定义为一个函数，但用作一个元素。我认为你应该做的逻辑方式是这样的：

let duplicateEllipses = document.getElementById(translateTable[this.id]);
duplicateEllipses.classList.toggle("keyHighlight1");

见https://jsfiddle.net/415osubL/

推荐阅读