0

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

问题是，现在我已经从一开始就隐藏了所有“单词块”（$(".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>

以及下面要显示的单词的 HTML。（删除单词，仅出于结构目的。）

<div id="viewGlossary">
    <div class="words" id="glossary-A">
    </div>
    <div class="words" id="glossary-B">
    </div>
    <div class="words" id="glossary-C">
    </div>
</div>

这是我的显示/隐藏 javascript 代码：

$(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);

    });

});
4

2 回答 2

1 
$(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);
        });
    });

});

小提琴

于 2013-05-19T22:32:26.540 回答
0

尝试将 selectedGloss 声明为“.letter”单击功能中的第一行。

于 2013-05-19T22:30:02.193 回答