Question

所以我正在构建一个词汇表页面，你知道，你单击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>

下面显示的单词的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>

这是我的show / hide 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);

    });

});

Answer 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);
        });
    });

});

FIDDLE

Answer 2

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

jQuery - 显示/隐藏难题

2 个答案: