jQuery-显示/隐藏难题

所以我正在构建一个词汇表页面，你知道，你点击a-Z，它会显示与下面的字母相关的单词

问题是，现在我所有的“单词块”都隐藏起来了（

$（“.words”）.hide（）；

）当我单击字母时，它们都没有显示出来

这是我的HTML：

<div class="letterBar">
    <a href="javascript:void(0)" class="letter" id="selector-A">
        <span>A</span>
    </a>
    <a href="javascript:void(0)" class="letter" id="selector-B">
        <span>B</span>
    </a>
    <a href="javascript:void(0)" class="letter" id="selector-C">
        <span>C</span>
    </a>
   .... and so on to Z
</div>

---

尝试将selectedGloss声明为“.letter”单击函数中的第一行

$(document).ready(function(){
    $(".words").hide();

    $(".letter").on('click', function(){
        var sel = $('#glossary-' + this.id.replace('selector-','') );

        $(".words").fadeOut(200, function(){
            sel.delay(200).fadeIn(200);
        });
    });

});

---

此外，尝试在字母内设置断点。单击。然后，您应该能够观察是否有任何选择器/变量未定义。从那里开始。

$(document).ready(function(){
    $(".words").hide();

    $(".letter").click(function(){
        var whichLetter = $(this).children("span").text();
        $(".words").fadeOut(200, function(){
            $(selectedGloss).fadeIn();
        });
        var selectedGloss = "#glossary-" + whichLetter;
        console.log(selectedGloss);

    });

});

$(document).ready(function(){
    $(".words").hide();

    $(".letter").on('click', function(){
        var sel = $('#glossary-' + this.id.replace('selector-','') );

        $(".words").fadeOut(200, function(){
            sel.delay(200).fadeIn(200);
        });
    });

});