我如何让用户不断点击图片并更改图片

Question

This is my javascript: It basically allows users to click on the second image (thermometer) and it will change to a slightly higher temperature AND at the same time, the beaker will be changed too accordingly. How do i let the user keep on clicking and the image to respond accordingly?

        $(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 file:

                    <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

Add a class notSelected to your image

<img id="image2" src="images/beaker0.png" class="img-rounded notSelected">

then try toggling this class and add src attribute depending on a certain class. This should work:

$("#image").on('click',function(){
    $("#image2").toggleClass("selected notSelected");

    // change image
    $("img.selected").attr('src','images/beaker1.png');
    $("img.notSelected").attr('src','images/t1.png');
});

Hope this helps.

Answer 2

If I understand you correctly, maybe this what you are looking for.
The idea is to use counter for current image shown.

    $(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;
        });

    });