Question

我正在尝试使用col-xs-12类在bootstrap元素上使用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

＆＃13;

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

＆＃13;

无法在多个类的bootstrap中隐藏元素

1 个答案: