在 Jquery 中创建词汇表字母表

Create a glossary alphabet in Jquery

本文关键字：词汇表 字母表 创建 Jquery      更新时间：2023-09-26

我正在制作一个词汇表，其中字母表中的字母在一个列表中，内容在另一个列表中。单击每个字母将显示该字母的内容，如下所示：

<ul class="alphabet">
    <li class="selected"><a class="alpha alpha-a">A</a></li>
    <li><a class="alpha alpha-b">B</a></li>
    <li><a class="alpha alpha-c">C</a></li>
    <li><a class="alpha alpha-d">D</a></li>
    <li><a class="alpha alpha-e">E</a></li>
    <li><a class="alpha alpha-f">F</a></li>
    <li><a class="alpha alpha-g">G</a></li>
    <li><a class="alpha alpha-h">H</a></li>
    <li><a class="alpha alpha-i">I</a></li>
    <li><a class="alpha alpha-j">J</a></li>
    <li><a class="alpha alpha-k">K</a></li>
    <li><a class="alpha alpha-l">L</a></li>
    <li><a class="alpha alpha-m">M</a></li>
    <li><a class="alpha alpha-n">N</a></li>
    <li><a class="alpha alpha-o">O</a></li>
    <li><a class="alpha alpha-p">P</a></li>
    <li><a class="alpha alpha-q">Q</a></li>
    <li><a class="alpha alpha-r">R</a></li>
    <li><a class="alpha alpha-s">S</a></li>
    <li><a class="alpha alpha-t">T</a></li>
    <li><a class="alpha alpha-u">U</a></li>
    <li><a class="alpha alpha-v">V</a></li>
    <li><a class="alpha alpha-w">W</a></li>
    <li><a class="alpha alpha-x">X</a></li>
    <li><a class="alpha alpha-y">Y</a></li>
    <li><a class="alpha alpha-z">Z</a></li>
</ul>
<ul class="list-objects list-object-a selected">
    <li><a href="">Item 1</a></li>
    <li><a href="">Item 2</a></li>
    <li><a href="">Item 3</a></li>
</ul>
<ul class="list-objects list-object-b">
    <li><a href="">Item 1</a></li>
    <li><a href="">Item 2</a></li>
    <li><a href="">Item 3</a></li>
</ul>
etc.


<script>
    $(".alphabet .alpha-a").click(function() {
        $(this).parent("li").addClass("selected").siblings("li").removeClass("selected");
        $("ul.list-object-a").addClass("selected").siblings("ul.list-objects").removeClass("selected");
    });
    $(".alphabet .alpha-b").click(function() {
        $(this).parent("li").addClass("selected").siblings("li").removeClass("selected");
        $("ul.list-object-b").addClass("selected").siblings("ul.list-objects").removeClass("selected");
    });
    etc.
</script>

我想简化javascript，这样我就不必为每个字母重复片段。有什么想法吗？@Muhammad 乌默尔？谢谢:)

试试这个。单击锚标记时，添加和删除父级slected Class。然后，对锚标记的文本进行修饰，并追加到存在相应定位标记内容的 <ul> 标记类。我的意思是说，如果您单击"B"，它应该选择.list-object-b而不是.list-object-a.代码$("ul.list-object-" + $(this).text().toLowerCase())做同样的事情

$(document).ready(function () {
    $('[class^="alpha alpha-"]').click(function () {
        $(this).parent("li").addClass("selected").siblings("li").removeClass("selected");
        $("ul.list-object-" + $(this).text().toLowerCase()).addClass("selected").siblings("ul.list-objects").removeClass("selected");
    });
});

试试这个：

使用href作为要显示的列表的引用。

例如，单击"<a class="alpha" href="#object-a">A</a> 将显示具有id="object-a"的列表

检查以下代码并尝试运行它。

$(".alphabet li").click(function() {
  $($(this).find('a').data('href')).addClass('selected').siblings('.list-objects.selected').removeClass('selected');
  $(this).addClass('selected').siblings('.selected').removeClass('selected');
});
.alphabet li {
  cursor: pointer;
}
.alphabet .selected {
  text-decoration: underline;
}
.list-objects {
  display: none;
}
.list-objects.selected {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="alphabet">
  <li class="selected">
    <a class="alpha" data-href="#object-a">A</a>
  </li>
  <li>
    <a class="alpha" data-href="#object-b">B</a>
  </li>
</ul>
<ul id="object-a" class="list-objects selected">
  <li>
    <a href="">Item A1</a>
  </li>
  <li>
    <a href="">Item A2</a>
  </li>
  <li>
    <a href="">Item A3</a>
  </li>
</ul>
<ul id="object-b" class="list-objects">
  <li>
    <a href="">Item B1</a>
  </li>
  <li>
    <a href="">Item B2</a>
  </li>
  <li>
    <a href="">Item B3</a>
  </li>
</ul>

您可以使用通配符：

$(class^=".alpha .alpha-").click(function() {
    $(this).parent("li").addClass("selected").siblings("li").removeClass("selected");
    $("ul.list-object-a").addClass("selected").siblings("ul.list-objects").removeClass("selected");
});
相关文章：