配列を使用してリスト内の特定のクラスのスパンを追加する

Question

クラス名が異なる3つのスパンを持つリストがあります。 "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]); 
      } 
     }); 
     }