javascript - 将 "active"状态添加到 Javascript

Question

我正在尝试将“事件”类添加到我在网上找到的图像交换脚本。该脚本非常适合我需要做的事情，但我需要为所选图像的缩略图设置样式。我认为添加“事件”将使这更容易，并且需要一些帮助。

我正在使用以下脚本:

<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);
    });
    $(imgSwap).preload();
});
$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}
</script>

这是 HTML:

<div id="gallery">
    <ul>
        <li><img src="gallery/thumb/img_1.jpg" alt="" /></li>
        <li><img src="gallery/thumb/img_2.jpg" alt="" /></li>
        <li><img src="gallery/thumb/img_3.jpg" alt="" /></li>
        <li><img src="gallery/thumb/img_4.jpg" alt="" /></li>
    </ul>
    <img src="gallery/img_1.jpg" alt="" id="main-img" />
</div>

如果我解释得不够清楚，请告诉我。感谢您的帮助!

Answer 1

改变:

$("#gallery li img").click(function(){
    $('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));
});

到

$("#gallery li img").click(function(){
    $("#gallery li img").removeClass('active');
    $(this).addClass('active');
    $('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));
});