jQuery - 顯示/隱藏難題

因此，我構建了一個詞彙表頁面，您知道，您單擊A-Z並顯示與下面這個字母關聯的詞語。jQuery - 顯示/隱藏難題

問題是，現在我已經將所有的「字塊」隱藏起來（$(".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); 

    }); 

});

來源

2013-05-19 Rick Bross

嘗試宣告selectedGloss是「.letter」中的第一行單擊功能。

來源

2013-05-19 22:30:02 AlvinfromDiaspar

此外，嘗試把一個斷點.letter點擊裏面。那麼你應該能夠觀察是否有任何選擇器/變量未定義。從那裏出發。 – AlvinfromDiaspar

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

來源

2013-05-19 22:32:26 adeneo

jQuery - 顯示/隱藏難題

回答

相關問題