javascript - javascript 或 jquery 在不同的按钮单击时更改不同的图像

Question

当我单击一个按钮时，我有五个按钮，当我单击第二个按钮时，一个图像再次出现在 div 标签中，另一个图像应该用新图像替换该图像，依此类推。我应该写什么代码来实现它。

请帮我这样做。可能是 javascript 或 jquery。我认为与 onclick 事件有关。

Answer 1

         <div class="imageSelector" />


  $(".btnOne").on("click", function(){

  $(".imageSelector").html("put here the html code of the image")

  })


  $(".btnTwo").....

Answer 2

简单如下，

<script type="text/javascript">
    $(function(){

        $('button').on('click',function(e){
            e.preventDefault();

            var imgSRC = $(this).data('src');

            $('#image').html('<img src="'+imgSRC+'" alt="" />');
        });

    });
</script>

<button data-src="image1.jpg">One</button>
<button data-src="image1.jpg">Second</button>
<button data-src="image1.jpg">Third</button>
<button data-src="image1.jpg">Fourth</button>
<button data-src="image1.jpg">Fifth</button>

<div id="image"></div>

工作演示

Answer 3

OldImage 值默认设置第一个图像 url 并且在函数 NewImage 中会出现新图像的 url，它可能是按钮的 id..

var oldImage="img.png";
function ImageChange(NewImage)
{
    $("#divId").replace(oldImage,"newImage");
    oldImage=newImage;
}