jQuery - Show/Hide Conundrum

Question

Итак, я строю страницу глоссария, вы знаете, вы нажимаете A-Z, и на нем показаны слова, связанные с этим письмом ниже.

Проблема в том, что теперь у меня есть все «блоки слов», скрывающиеся от get-go ($(".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); 

    }); 

}); 

Answer 1

пытаются объявить selectedGloss быть первой линии в «.letter» нажмите функция ,

Answer 2

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