Question

我有一个持有页面，用于正在建设中的网站。

有一个图像和一个带按钮的框。单击按钮我想要更改图像。

将会有一些具有相同名称和下标的图像集合（例如：TG-img- 01 .jpg）。
想法是增加下标。

未使用JavaScript 15年，所以寻找如何完成它的示例。

欢呼声。

Answer 1

我只给你的图像增量随机数。所以这只是改变img源，只要你点击按钮随机生成的数字与您的图像名称，如 TG-img-01.jpg 如果您不明白这一点让我很高兴为您提供帮助

＆＃13;

$('button').click(function() {
  randint = Math.floor(Math.random() * 10) + 1;
  buildimg = 'TG-img-' + randint + '.jpg' 
  $('div > span').text('TG-img-' + randint);
  $('div > img').attr('src', buildimg);
  console.log(buildimg);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <span>imagine its like picture with TG-img-01.jpg</span>
  <img src='https://www.askideas.com/wp-content/uploads/2017/06/Free-Online-Photos1.jpg'>
</div>
<button>
change
</button>

＆＃13;

Answer 2

鉴于标签是javascript而不是jQuery，我倾向于满足该要求的解决方案。在那种情况下：

＆＃13;

let counter = 0; // declared in global scope
document.querySelector('button').addEventListener('click', function() {
    	counter++; // increment this instead of rand int so it's 0,1,2 etc
    	buildimg = `TG-img-${counter}.jpg`;
    	document.querySelector('#imageID').setAttribute('src', buildimg);
      document.querySelector('div').innerHTML = buildimg;
    });

＆＃13;

<button>Click me</button>
<img id="imageID" src=""/>
<div></div>

＆＃13;

Answer 3

请尝试以下示例代码。

<script>
 function pictureChange()
  {
   document.getElementById("theImage").src="img02.png";
  }
</script>

<body>
 <img id="theImage" src="img01.png">
 <p><input type="button" id="theButton" value="click me!" 
    onclick="pictureChange()"></p>
</body>

按钮单击时更改图像src

3 个答案: