使用基于Jquery的資料屬性顯示基于字母選擇的元素

這就像排序，如果我選擇“A”品牌字母，我想顯示以“A”開頭的串列，從 A 到 Z 也是如此。如果我選??擇一個需要使用 jquery 隱藏所有其他字母的串列。

當我們單擊data-js-brands-letter="a"需要顯示時data-js-brands-section="a"，我嘗試了使用以下鏈接如何根據資料屬性使用 jQuery 顯示元素的一些方法，但這不起作用。

<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>

uj5u.com熱心網友回復：

嘗試這個

• 如果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>

標籤：html 查询

上一篇：如何在jQuery中向下滑動按鈕

下一篇：如何選擇最后一個*之后的句子