使用基于 Jquery 的数据属性基于字母选择显示元素

Question

这就像排序，如果我选择“A”品牌字母，我想显示以“A”开头的列表，A 到 Z 也是如此。如果我选​​择一个需要使用 jquery 隐藏所有其他字母。

当我们点击 data-js-brands-letter="a" 需要显示 data-js-brands-section="a" 时，我已经尝试了一些使用以下链接 How to show elements using jQuery based on data attributes 的方法，但这不起作用。

<div class="brands js-brands">
  <div class="brands__alphabet">
    <ul>
      <li class="brands__letter ">
        <a href="javascript:void(0)" class=" " data-js-brands-letter="all">All
                </a>
      </li>
      <li class="brands__letter ">
        <a href="javascript:void(0)" class=" " data-js-brands-letter="a">A
                </a>
      </li>
      <li class="brands__letter ">
        <a href="javascript:void(0)" class=" " data-js-brands-letter="b">B
                </a>
      </li>
      <li class="brands__letter ">
        <a href="javascript:void(0)" class=" " data-js-brands-letter="z">Z
                </a>
      </li>
    </ul>
  </div>
  <div class="brands__content" data-js-brands-content="">
    <div class="brands__section " data-js-brands-section="a">

      <div class="brands__section-letter ">
        <a href="javascript:void(0)" data-js-brands-letter="a">A</a>
      </div>
      <div class="">
        <ul>
          <li>Aaa</li>
          <li>Aaaaa</li>
          <ul>
      </div>
    </div>
    <div class="brands__section " data-js-brands-section="b">

      <div class="brands__section-letter ">
        <a href="javascript:void(0)" data-js-brands-letter="b">B</a>
      </div>
      <div class="">
        <ul>
          <li>Baa</li>
          <li>Baaaa</li>
          <ul>
      </div>
    </div>

    <div class="brands__section " data-js-brands-section="z">

      <div class="brands__section-letter ">
        <a href="javascript:void(0)" data-js-brands-letter="z">Z</a>
      </div>
      <div class="">
        <ul>
          <li>Zaa</li>
          <li>Zaaaa</li>
          <ul>
      </div>
    </div>

  </div>

</div>

Answer 1

试试这个

• 如果all被点击，显示全部并离开
• 否则显示与点击的字母匹配的部分

你可以拥有

$(".brands__content [data-js-brands-section]").show();

如果你默认使用 CSS 隐藏，否则不要隐藏

const $allSections = $(".brands__content [data-js-brands-section]");
$(".brands__alphabet [data-js-brands-letter]").on("click", function() {
  const what = $(this).data("js-brands-letter")
  if (what === "all") {
    $allSections.show()
    return
  }
  $allSections.hide();
  $(".brands__content [data-js-brands-section=" + what + "]").show()
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="brands js-brands">
  <div class="brands__alphabet">
    <ul>
      <li class="brands__letter ">
        <a href="javascript:void(0)" class=" " data-js-brands-letter="all">All</a>
      </li>
      <li class="brands__letter ">
        <a href="javascript:void(0)" class=" " data-js-brands-letter="a">A</a>
      </li>
      <li class="brands__letter ">
        <a href="javascript:void(0)" class=" " data-js-brands-letter="b">B</a>
      </li>
      <li class="brands__letter ">
        <a href="javascript:void(0)" class=" " data-js-brands-letter="z">Z</a>
      </li>
    </ul>
  </div>
  <div class="brands__content" data-js-brands-content="">
    <div class="brands__section " data-js-brands-section="a">

      <div class="brands__section-letter ">
        <a href="javascript:void(0)" data-js-brands-letter="a">A</a>
      </div>
      <div class="">
        <ul>
          <li>Aaa</li>
          <li>Aaaaa</li>
        </ul>
      </div>
    </div>
    <div class="brands__section " data-js-brands-section="b">
      <div class="brands__section-letter ">
        <a href="javascript:void(0)" data-js-brands-letter="b">B</a>
      </div>
      <div class="">
        <ul>
          <li>Baa</li>
          <li>Baaaa</li>
        </ul>
      </div>
    </div>

    <div class="brands__section " data-js-brands-section="z">

      <div class="brands__section-letter ">
        <a href="javascript:void(0)" data-js-brands-letter="z">Z</a>
      </div>
      <div class="">
        <ul>
          <li>Zaa</li>
          <li>Zaaaa</li>
        </ul>
      </div>
    </div>

  </div>

</div>