交换缩略图图像并更改单击图像的css

Question

我正在尝试将缩略图的图像与主图像交换，然后在点击的图像中放置一个蓝色边框。我试图通过id做document.getelemnt，然后把缩略图的id放在第一个缩略图css上，而不是点击的那个。

这是我正在使用的代码和脚本。我尝试了访问过的css但没有工作。

<script type="text/JavaScript">
// prepare the form when the DOM is ready 
$(document).ready(function() {
    $("#gallery li img").click(function(){
        $('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));

    });
    var imgSwap = [];
     $("#gallery li img").each(function(){
        imgUrl = this.src.replace('thumb/', '');
        imgSwap.push(imgUrl);
        document.getElementById("thumb-img").style.border = "2px blue solid";
        document.getElementById("thumb-img").style.opacity = "1";
    });
    $(imgSwap).preload();
});
$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;

    });
}
</script>

<div class="container">

    <div id="gallery" class="col-md-12">
    <img src="1.png" alt="" id="main-img"/>
    <li id="thumb"><img src="http://cdn.resize.sparkplatform.com/fl/1024x768/true/20161107174518882259000000-o.jpg" alt="" class="img-thumbnail" id="thumb-img" /></li>
     <li id="thumb"><img src="1.png" alt="" class="img-thumbnail"  id="thumb-img"/></li>