javascript - 如何让用户不断点击图像并更改图像

Question

这是我的 javascript:它基本上允许用户单击第二个图像(温度计)，它将更改为稍高的温度，同时烧杯也会相应地更改。如何让用户继续点击并且图像做出相应的响应？

        $(document).ready(function () {

            $("#image").click(function () {

                //when image is clicked, change image 

                var img2 = document.getElementById('image2');
                img2.src = "images/beaker1.png";
                var img = document.getElementById('image');
                img.src = "images/t1.png";

                return false;
            });

        });

HTML 文件:

                    <div class="col-sm-6">
                        <img id="image2" src="images/beaker0.png" class="img-rounded">
                        <img src="images/saturated_percipitate_1.png" class="img-rounded">

                    </div> 

                    <div class="col-sm-6">
                        <p><b>Increase Temperature</b></p>
                        <img id="image" src="images/t0.png" class="img-rounded"/>
                        <p><b>Decrease Temperature</b></p>
                    </div> 
                </div>

Answer 1

如果我理解正确的话，也许这就是您正在寻找的。
这个想法是对当前显示的图像使用计数器。

    $(document).ready(function () {

        var indexImage = 1;
        $("#image").click(function () {

            //check if thermometer is at max.
            if(indexImage > 13){  //13 is example maximum value.
                return false;
            }

            //when image is clicked, change image 
            var img2 = document.getElementById('image2');
            img2.src = "images/beaker" + indexImage + ".png";
            var img = document.getElementById('image');
            img.src = "images/t" + indexImage + ".png";

            indexImage++;
            return false;
        });

    });