javascript 或 jquery 在不同的按钮点击上更改不同的图像

Question

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

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

Answer 1

简单如下，

<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>

<强> Working DEMO