当项目悬停时切换2个div id，项目点击时2个div id保持不变。

Question

我有一个非常令人沮丧的情况，这应该是看似简单。

当项目(.item-2)被悬停时，我现在有2个div id可以切换(#text_2, text_2-2).然后当项目被点击时，我想让#text_2和#text_2-2都 "停留"，这意味着在其中一个被点击之前都是可见的。

我找到了一个脚本，它可以工作，但只有#text_2-2在项目-2被点击时才会停留。

这两个id都被分配了 "隐藏-默认 "类，但是这个类也被分配给了脚本中的其他id，并且和另一个javascript函数绑定。

另外，这些项目也被赋予了一个数据目标ID，如#text_2, #text_3, #text_4等。我想这可能是原因，我想让它们保持我想要的方式。

有人能告诉我该怎么做吗？ 也许可以解释一下，为什么它是如此的技巧和可能的dta-tager如何影响它如何在javascript中工作？这将是非常感激 我一直在试图找出它的滑板互联网，但我没有找到一个解决方案。

enter code herehttps:/jsfiddle.netsdnr73jk

Answer 1

下面是你代码的简化。

jQuery($ => {  // DOM ready and $ alias secured

  $(".item[data-target]").on({
      mouseenter() {
        if (!this._active) $(this.dataset.target).removeClass('hidden');
      },
      mouseleave() {
        if (!this._active) $(this.dataset.target).addClass('hidden');
      },
      click() {
        this._active = !this._active; // Toggle 
        $(this.dataset.target).removeClass('hidden');
      }
    });

});

.items { display: flex; cursor: pointer; }
.hidden { display: none;}

<div class="items">
  <div class="item" data-target="#text_2">
    <img src="//placehold.it/60x60/2e8" alt="Some image 1" width="60">
  </div>
  <div class="item" data-target="#text_3">
    <img src="//placehold.it/60x60/f69" alt="Some image 2" width="60">
  </div>
</div>

<div>
  <div class="hidden" id="text_2" style="color:#2e8;">Textile design</div>
  <div class="hidden" id="text_3" style="color:#f69;">Objects</div>
</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>