我如何 select 一个匹配的 html 元素不是使用 javascript 的事件？

Question

我正在创建一个工具提示，当悬停在条形图上时，它会从事件中的数据集和代表同一月份但不同年份的条形图中提取信息。 但是，我似乎无法编写符合该条件的 querySelector。

这是我为这个例子简化的 html：

<div class="graph-wrapper">
  <svg>
   <g>
     <rect data-month="January" data-count="5380" data-year="2019"></rect>
     <rect data-month="February" data-count="4414" data-year="2019"></rect>
     <rect data-month="March" data-count="5339" data-year="2019"></rect>
   </g>
   <g>
     <rect data-month="January" data-count="5177" data-year="2020"></rect>
     <rect data-month="February" data-count="4466" data-year="2020"></rect>
     <rect data-month="March" data-count="3775" data-year="2020"></rect>
   </g>
  </svg>
</div>

然后这是我的查询选择器：

let matchingElement = document.querySelector(`.graph-wrapper rect:not([data-year='${event.target.dataset.year}']),.graph-wrapper rect[data-month='${event.target.dataset.month}']`)

总之，我的 querySelector 正在尝试 select 其数据集中与 event.target 具有相同月份但年份不同的矩形。

如果我需要分享其他信息，请告诉我。

Answer 1

这是我的想法，希望它有效：

let data = [];
$("rect").on("hover", function() {
  data = [];
  let $this = $(this);
  let month = $this.attr('data-month');  
  $("rect").each(function() {
    if ($(this).attr('data-month') == month && $(this).attr('data-year') != $this.attr('data-year')) {
      data.push({
       month: month,
       year: $(this).attr('data-year'),
       count: $(this).attr('data-count'),
       rect: $(this)
      });
    }
  });
}); 

在数组“数据”中，您应该拥有您在所有年份中选择的月份的所有信息。 （顺便说一句，我用的是 jQuery 给我写的比较简单，希望没问题）

Answer 2

这是香草JS：

let dataArray = [];
let rects = document.querySelectorAll(
    ".graph-wrapper rect[data-month]"
  );
  rects.forEach((rect) => {
    rect.addEventListener("mouseenter", (event) => {
      rects.forEach((rect) => {
        if (
          rect.dataset.month === event.target.dataset.month &&
          rect.dataset.year !== event.target.dataset.year
        ) {
          dataArray.push(rect.dataset.month);
          dataArray.push(rect.dataset.year);
          dataArray.push(rect.dataset.count);
        }
      });