javascript - 在点击事件中过滤多个 div 中的链接/内容

Question

我目前正在努力过滤多个框中的多个内容。

• 我在顶部有与一些人名相关联的链接/按钮。
• 我还有一个带有不同 div 的侧边栏，范围从 A 到 D(任意)。
• 在这些 div 中，我在不同的地方得到了相同的名称

我想做的基本上是在不同的 div(A 到 D)中仅显示您在顶部单击的人。并且显然能够点击其他人并做同样的事情。目前，第一次点击似乎做了我想要的，但随后的点击没有，一切都消失了。

我不知道该怎么办。该元素有许多不同类型的过滤，没有一个给我带来麻烦，但这个......

  <div id="sidebar_wrapper">
<div class="sidebar_nav">
  <div class="name_icon_box">
    <a href="#" class="icon_all" id="icon_all">ALL</a>
    <a href="#" class="henry" id="henry">HENRY</a>
    <a href="#" class="john" id="john">JOHN</a>

<div class="company_box_white box_a">
    <div class="company_box">
      <div class="button-list"><span class="white_letter">A</span><span class="arrow_menu"></span></div>
      <div class="company_box_list">
        <ul class="name_icon">
          <li><a href="#"><p data-key-value="robert">robert</p></a></li>
          <li><a href="#"><p data-key-value="henry">henry</p></a></li>
          <li><a href="#"><p data-key-value="steve">steve</p></a></li>
          <li><a href="#"><p data-key-value="dean">dean</p></a></li>
        </ul>
      </div>
    </div>
  </div>

代码似乎太大而无法按原样发布，这里是一个 fiddle 链接。 https://jsfiddle.net/6sku2ro5/1/

提前致谢。

Answer 1

我已经根据在初始框中单击名称来隐藏和显示下面框中的文本。

您的代码中的几处内容已更正，现在匹配的相关名称选择将显示在下面的每个框中。

 if (p_data_value == currentPerson || currentPerson == "icon_all") {
      //$(allBoxArr[index]).find('li').find('p').append(p_content);
      $(this).show();
    } else {
      $(this).hide();
    }

Working fiddle