点击缩略图无法切换主图的问题排查及修复代码请求

架构老林
2026-10-2
问题原因
代码的核心问题是JavaScript执行时机错误：负责绑定缩略图点击事件的脚本放在<head>标签内运行，此时页面<body>中的主图、缩略图DOM元素还未完成渲染，document.getElementById('MainImg')、document.getElementsByClassName('small-img')无法获取到对应元素，事件绑定失效，因此点击缩略图没有反应。
修复后完整代码
<!doctype html>
<html lang="en">
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    
    <style>
        .small-img-group{
            display: flex;
            justify-content: space-between;
        }
        .small-img-col{
            flex-basis: 24%;
            cursor: pointer;
        }
        .counter1 {
                float: left;
                display: flex;
                justify-content: space-between;
                overflow-x: hidden;
                overflow-y: hidden;
            }

            .counter2 {
                float: left;
                display: flex;
                justify-content: space-between;
                overflow-x: hidden;
                overflow-y: hidden;
                padding-left: 15px;
            }
            
          .up, .down {
                display: inline-block;
                color: rgb(0, 0, 0);
                font-size: 20px;
                margin: 1px 1px;
                cursor: pointer;
                width: 15px;
                line-height: 14px;
                height: 16px;
                text-align: center;
                font-weight: bold;
                border: 1px solid #000;
                user-select: none;
            }
            .up:hover, .down:hover {
                
                color: #fd0b3f;
                text-align: center;
            }

            .adults {
                padding-right: 5px;
            }

            .children {
                padding-right: 5px;
            }

            input {
                appearance: none;
                height: 21px;
                text-align: center;
                width: 42px;
                line-height: 24px;
                font-size: 15px;
                border-radius: 5px;
                
            }            
        .container {
                display: flex;
            }
            input[type="radio"]{
                display: none;
            }
            label[for=private] {
                position: relative;
                color: orangered;
                font-size: 20px;
                border: 2px solid orangered;
                border-radius: 5px;
                align-items: left;
                display: flex;
                cursor: pointer;
                margin-right: 10px;
            }
            label[for=shared] {
                position: relative;
                color: orangered;
                font-size: 20px;
                border: 2px solid orangered;
                border-radius: 5px;
                align-items: left;
                display: flex;
                cursor: pointer;
            }
            input[type="radio"]:checked + label{
                background-color: orangered;
                color: white;
            }
            input[type="radio"]:checked + label:before{
                height: 16px;
                width: 16px;
                border: 10px solid white;
                background-color: orangered;
            }    
    </style>
    <script>
        function increaseCount(e, el) {
                    var input = el.previousElementSibling;
                    var value = parseInt(input.value, 10);
                    value = isNaN(value) ? 0 : value;
                    value++;
                    input.value = value;
                }
                function decreaseCount(e, el) {
                    var input = el.nextElementSibling;
                    var value = parseInt(input.value, 10);
                    if (value > 1) {
                        value = isNaN(value) ? 0 : value;
                        value--;
                        input.value = value;
                    }
                }
                function decreaseCount2(e, el) {
                    var input = el.nextElementSibling;
                    var value = parseInt(input.value, 10);
                    if (value > 0) {
                        value = isNaN(value) ? 0 : value;
                        value--;
                        input.value = value;
                    }
                }
            </script>
</head>
  <body>

    <section class="container sproduct my-5 pt-5">
        <div class="row mt-5">
            <div class="col-lg-5 col-md-12 col-12">
                <img class="img-fluid w-100 pb-1" src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" alt="" id="MainImg" width="450">

                <div class="small-img-group">
                    <div class="small-img-col">
                        <img src="https://media.tacdn.com/media/attractions-splice-spp-674x446/09/99/99/87.jpg" width="100%" class="small-img" alt="">
                    </div>
                    <div class="small-img-col">
                        <img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" class="small-img" alt="">
                    </div>
                    <div class="small-img-col">
                        <img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" class="small-img" alt="">
                    </div>
                    <div class="small-img-col">
                        <img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" class="small-img" alt="">
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-12 col-12">
                <h6>Home / Morning Safari</h6>
                <h3>Morning Safari</h3>
                <h2> <label> Total:</label><label class="total Price"></label> </h2>
                <div class="counter1">
                    <Label class="Adults">Adults</Label>
                    <div class='down' onclick='decreaseCount(event, this)'>-</div>
                    <input type='text' value='1' readonly>
                    <div class='up' onclick='increaseCount(event, this)'>+</div>
                </div>
                <div class="counter2">
                    <Label class="Children">Children</Label>
                    <div class='down' onclick='decreaseCount2(event, this)'>-</div>
                    <input type='text' value='0' readonly>
                    <div class='up' onclick='increaseCount(event, this)'>+</div>
                </div>
                <div class="container" style="padding-left: 0;padding-top: 5px;">
                    <input type="radio" name="occupancy" id="private" checked="checked">
                    <label for="private">Private</label>
                    <input type="radio" name="occupancy" id="shared">
                    <label for="shared">Shared</label>
                </div>
                
            </div>
        </div>
    </section>
      
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <!-- 缩略图切换脚本调整到DOM元素加载完成后执行 -->
    <script>
        var MainImg = document.getElementById('MainImg');
        var smallimg = document.getElementsByClassName('small-img');

        smallimg[0].onclick = function() {
            MainImg.src = smallimg[0].src;
        }
        smallimg[1].onclick = function() {
            MainImg.src = smallimg[1].src;
        }
        smallimg[2].onclick = function() {
            MainImg.src = smallimg[2].src;
        }
        smallimg[3].onclick = function() {
            MainImg.src = smallimg[3].src;
        }
    </script>
    </body>
  
</html>
内容的提问来源于stack exchange，提问作者MMunir. Asif