javascript - 在 Jquery 中创建词汇表字母表

Question

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

<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，这样我就不必为每个字母重复代码片段。有任何想法吗？ @穆罕默德·乌默？谢谢:)

Answer 1

试试这个。当点击 anchor 标记添加和删除 slected Class然后将 anchor 标记的文本添加到 <ul> 中。存在相应 anchor 标记内容的标记类。我的意思是说，如果您单击“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");
    });
});