具有相同类的元素的双向突出显示答案

【问题标题】：Bi-directional highlighting of elements with same class具有相同类的元素的双向突出显示
【发布时间】：2021-11-17 22:46:32
【问题描述】：

我有 2 个项目列表。一个是普通的<ul>，另一个是用<div>s 包裹的图片网格。

我希望突出显示悬停在两个列表上的项目，这将在两个方向上起作用。

因此，如果我将鼠标悬停在 <li>Apple 上，<li>Apple 和 <div>Apple 都会突出显示。这也应该在另一个方向上起作用，如果我将鼠标悬停在 <div>Apple 上，<div>Apple 和 <li>Apple 都会突出显示。

注意事项：

我可以将唯一的类名添加到任何元素。 <li> & <div> 或 <a> 内。
突出显示可以是.active 类或内联样式。

类似于以下问题，但在两个方向上都有效： Jquery 'Highlight' element with the same class

<ul>
  <li class="app-hover-select">
    <a class="item-1" href="">Apples</a>
  </li>
  <li class="app-hover-select">
    <a class="item-2" href="">Pears</a>
  </li>
  <li class="app-hover-select">
    <a class="item-3" href="">Bananas</a>
  </li>
  <li class="app-hover-select">
    <a class="item-4" href="">Pineapples</a>
  </li>
</ul>
<div class="wrapper">
  <div class="app-hover-select">
    <a class="item-1" href="">
      <img scr="">
      Apples
    </a>
  </div>
  <div class="app-hover-select">
    <a class="item-2" href="">
      <img scr="">
      Pears
    </a>
  </div>
  <div class="app-hover-select">
    <a class="item-3" href="">
      <img scr="">
      Bananas
    </a>
  </div>
  <div class="app-hover-select">
    <a class="item-4" href="">
      <img scr="">
      Pineapples
    </a>
  </div>
</div>

我当前使用当前 HTML 的 jQuery：

        jQuery('.app-hover-select > a').hover(function() {
            var appClass = jQuery(this).attr("class");
            jQuery(appClass).toggleClass('active');
        });

我的逻辑是：

悬停.app-hover-select > a
var appClass = 获取课程
将类active添加到类appClass的所有元素

【问题讨论】：

请向我们展示您的尝试。
类似于How to Answer，但可以双向使用 - 然后将其添加到另一个方向。
通过为双方提供相同的课程，您实际上使它变得更加容易 - 只是 $(".item-1").hover(() => $(".item1").addClass("hover"), () => $(".item1").removeClass("hover")) - 当然您可能不想这样做，否则您必须拥有 4x 相同的代码（以及更多如果您添加更多项目）。我会在两边添加一个data-item="1"（等）和相同的代码，但使用[item=" + $(this).data(item) + "]"（当然不使用箭头函数）
@CarstenLøvboAndersenn 请看上面我目前的尝试。
将 jQuery(appClass) 更改为 jQuery("." + appClass) 以添加类选择器。我会将鼠标悬停更改为鼠标悬停并从所有活动中删除活动，然后对您进行排序：jsfiddle.net/d1c97rx4（尽管这可能不是最有效的......所以可以调整）

标签： javascript html jquery css

【解决方案1】：

如果你想要这个：

试试这个-

jQuery(".app-hover-select > a").hover(function () {
  const listOfItems = this.parentElement.parentElement;
  const listItem = this.parentElement;
  const i = Array.from(listOfItems.children).indexOf(listItem);

  jQuery("ul .app-hover-select").each((_i, el) => {
    if (_i === i) {
      el.classList.add("active");
    } else {
      el.classList.remove("active");
    }
  });
  jQuery(".wrapper .app-hover-select").each((_i, el) => {
    if (_i === i) {
      el.classList.add("active");
    } else {
      el.classList.remove("active");
    }
  });
});

【讨论】：

这很好用，谢谢 Akul！