使用數組在列表中添加具有特定類的跨度

Question

我有一個帶有三個跨度的列表，每個類都有不同的類名。使用名爲「Shift」的按鈕我試圖只切換類名爲「letter」的範圍，以便它顯示小寫或大寫。

到目前爲止，我可以切換類命名爲「字母」的跨度，但它沒有從數組lowerCase/upperCase獲得 正確的字符。

這裏是一個jsfiddle來展示我的意思。 https://jsfiddle.net/elMed/1qh9ggx5/1/。

非常感謝您的幫助。

HTML：

<ul id="theList"> 
    <li class="element "> 
     <span class="number">1</span>   
     <span class="letter">q</span> 
     <span class="symbol">!</span>  
    </li> 
    <li class="element "> 
     <span class="number">2</span> 
     <span class="letter">w</span> 
     <span class="symbol">&quot;</span> 
    </li>  
</ul> 
<br> 
<input type="button" id="theShift" value="Shift"> 

腳本：

var lowerCase = ['q', 'w', 'e']; 
    var upperCase = ['Q', 'W', 'E']; 
    var isShift = false; 

    //start 
     $("#theShift").click(function() { 
      if (isShift) { 
      $('#theList>li').find('span.letter').each(function(){ 
       $(this).text(lowerCase[$(this).index()]); 

      }); 
      } 
      else { 
      $('#theList>li').find('span.letter').each(function(){ 
       $(this).text(upperCase[$(this).index()]); 

      }); 
      } 
      isShift = !isShift; 
    }); 
    //end 

Answer 1

$("#theShift").click(function() { 
     if (isShift) { 
     $('#theList>li').find('span.letter').each(function(){ 
      var val = $(this).text(); 
      var indexVal = $.inArray(val, upperCase); 
      if(indexVal != -1){ 
       $(this).text(lowerCase[indexVal]); 
      } 
     }); 
     } 
     else { 
     $('#theList>li').find('span.letter').each(function(){ 
      var val = $(this).text(); 
      var indexVal = $.inArray(val, lowerCase); 
      if(indexVal != -1){ 
       $(this).text(upperCase[indexVal]); 
      } 
     }); 
     }