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

Posted 2023-03-05

【中文标题】javascript或jquery在不同的按钮点击上更改不同的图像[重复]

【英文标题】：javascript or jquery change different Images on different button clicks [duplicate]

【发布时间】：2013-06-27 00:14:30

【问题描述】：

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

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

【参考方案1】：

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

var oldImage="img.png";
function ImageChange(NewImage)

    $("#divId").replace(oldImage,"newImage");
    oldImage=newImage;

【参考方案2】：

简单如下，

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

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

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

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

    );
</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

【讨论】：

是的，这正是我想要的。谢谢@Dipesh Parmar

@phpdeveloper 欢迎老兄

确定我应该使用什么默认 jquery 文件。我用过 1.9.1

@Phpdeveloper jQuery 1.9 就是你所需要的

【参考方案3】：

         <div class="imageSelector" />


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

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

  )


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

【讨论】：

感谢此代码也可以正常工作@LxZv