javascript - #div1-x 导致 #div2-x 上的相应操作，其中 x=[a-z]

Question

我正在制作一个包含字母表中每个字母的词汇表菜单。因此，当您单击字母 G 时，您只能看到以字母 G 开头的词汇表条目。我有一个有效的实现，但我想让它比编写 26 个 onclick 处理程序(每个字母一个)更简单。

基本上我想减少:

    $('#nav-a').click(function() {
        $('.glossary-alphabet').not("#glossary-a").hide();
        $("#glossary-a").show();
    });
    $('#nav-b').click(function() {
        $('.glossary-alphabet').not("#glossary-b").hide();
        $("#glossary-b").show();
    });
    $('#nav-c').click(function() {
        $('.glossary-alphabet').not("#glossary-c").hide();
        $("#glossary-c").show();
    }); 
...

类似于(伪代码):

    $('#nav-[a-z]').click(function() {
        $('.glossary-alphabet').not("#glossary-[a-z]").hide();
        $("#glossary-[a-z]").show();
    });

有办法做到这一点吗？我知道您可以使用正则表达式匹配来返回所有以 #nav- 开头的 div，但是如何设置正则表达式逻辑以便每个 #nav-X导致对#glossary-X进行相应的操作？

Answer 1

最好更改您的 HTML，这样您就没有 #nav-a、#nav-b.. 类似于 realseanp 建议的内容，但如果您必须使用当前的 HTML，那么类似这样的内容应该可以工作，我还没有测试过代码。将 click 事件绑定(bind)到 id 以“nav-”开头的所有元素。然后获取元素 id 的最后一个字符，这将是您要显示的字母。

$( "[id^='nav-']" ).click(function(){
    clicked_letter = $(this).attr('id').slice(-1);
    $('.glossary-alphabet').not("#glossary-" + clicked_letter).hide();
    $("#glossary-" + clicked_letter).show();
})