複数のクラスを持つブートストラップの要素を非表示にできません

Question

col-xs-12クラスのブートストラップ要素でjqueryを使用して要素を表示/非表示しようとしています： サムネイルを押したときに隠しクラスを追加/削除しようとしています。

これが私の基本的なページレイアウトです：

<section id="BA_images" class="row"> 
       <div id="BA_1" class=""> 
       <div class="twentytwenty-container"> <img src="../_images/products/cards/sample_1.jpg" /> <img src="../_images/products/cards/sample_2.jpg" /> </div> 
       </div> 
       <div id="BA_2" class="col-xs-12 hidden"> 
       <div class="twentytwenty-container"> <img src="../_images/products/cards/sample_3.jpg" /> <img src="../_images/products/cards/sample_4.jpg" /> </div> 
       </div> 
       <div id="BA_3" class="col-xs-12 hidden"> 
       <div class="twentytwenty-container"> <img src="../_images/products/cards/sample_3.jpg" /> <img src="../_images/products/cards/sample_4.jpg" /></div> 
       </div> 
       <div id="BA_4" class="col-xs-12 hidden"> 
       <div class="twentytwenty-container"> <img src="../_images/products/cards/sample_3.jpg" /> <img src="../_images/products/cards/sample_4.jpg" /></div> 
       </div> 
      </section> 


      <section id="BA_thumbs" class="row"> 
        <div id="thumb1" class="current col-xs-3"><a href="#" class="thumbnail"><img src="../_images/products/cards/sample_1.jpg" alt="" onclick="showHideImage(1)"/></a> 
        </div>       

        <div id="thumb2" class="none col-xs-3"><a href="#" class="thumbnail"><img src="../_images/products/cards/sample_2.jpg" alt="" onclick="showHideImage(2)"/></a> 
        </div> 

        <div id="thumb3" class="none col-xs-3"><a href="#" class="thumbnail"><img src="../_images/products/cards/sample_3.jpg" alt="" onclick="showHideImage(3)"/></a> 
        </div> 

        <div id="thumb4" class="none col-xs-3"><a href="#" class="thumbnail"><img src="../_images/products/cards/sample_4.jpg" alt="" onclick="showHideImage(4)"/></a> 
        </div> 

      </section> 

スクリプトはこれです：それは動作しません

function showHideImage(thisID){ 
    "use strict"; 
    var i, thumbID, imageID; 
    var thumb_prefix = "thumb_"; 
    var image_prefix = "BA_"; 
    var thumbNum = 4; 
    for (i = 1 ; i<thumbNum+1 ; i++){ 
     //thumbs index starts with 1. 
     thumbID = thumb_prefix + i; 
     imageID = image_prefix + i; 
     console.log(document.getElementById(imageID)); 
     console.dir(document.getElementById(imageID)); 
     if (i === thisID) { 
      $('#' + thumbID).addClass("none"); 
      $('#' + imageID).removeClass("hidden"); 
     } 
     else{ 
      $('#' + thumbID).addClass("none"); 
      $('#' + imageID).addClass("hidden"); 
      } 
     } 
} 

... は誰でも助けることができますか？

Answer 1

function showHideImage(id) { 
 
    $('[id^="thumb"]').removeClass('current').filter('#thumb' + id).addClass('current') 
 
    $('[id^="BA_"]').addClass('hidden').filter('#BA_' + id).removeClass('hidden') 
 
}