如何在 DIV 中更新新图像

How to update new images within DIV?

本文关键字：图像 新图像 更新 DIV      更新时间：2023-09-26

我是HTML和Javascript的新手。请有人可以帮助我解决以下问题。页面加载后，以下代码将正常显示 579。 但是，我需要它显示不同的数字而不刷新整个页面。 例如，如果某些内容触发了鼠标单击，则将显示 795（图像）。我能做什么在图像中创建新数字以显示在与以前相同的位置。谢谢。

' DisplayNumImg（5,7,9）;

<a href="#" onclick="DisplayNumImgChanged(7,9,5)" /a>

#child2-3
{
 position: absolute;
 width: 165px;
 height: 15px;
 left: 5px;
 top: 40px;
}
.thumb_child1
{
  float:right;
  margin:0px;
}

function DisplayNumImg( a, b, c)
{
  var s;
  if ( a == 5 ) {
     s = '<img class="thumb_child1" src="./images/5_blu.png"> ';
     document.write( s );
  }
  if ( a == 7 ) {
     s = '<img class="thumb_child1" src="./images/7_blu.png"> ';
     document.write( s );
  }
  if ( a == 9) {
     s = '<img class="thumb_child1" src="./images/9_blu.png"> ';
     document.write( s );
  }
}
function DisplayNumImgChanged( a,b,c )
{
   // please help me with code here or something that you think it would work. Thanks.
}

'

好的，首先：我强烈建议你应该学习和使用jQuery（然后，一旦你有了，如果你仍然想作为一个开发人员进行改进，请通过学习支持它的Javascript代码来回去学习它是如何工作的）。 这将使您的事情变得更容易。

在这种情况下，听起来您要做的是更新图像元素上的 src 属性。 使用jQuery，这可以按如下方式完成：

$('.thumb_child1').attr('src', './images/9_blu.png');

在原始JS中，这将是这样的：

var thumbs = document.getElementsByTagAndClassName(null, 'thumb_child1');
for (var i = 0; i < thumbs.length; i++) {
    thumbs[i].src = './images/9_blu.png';
}

（尽管上述代码未经测试，但如果您有问题，请回发。

  1. 不要使用Document.write（永远！）
  2. 将 CSS 放在样式标记中
  3. 将 JavaScript 放在脚本标签中
  4. 仅在StackOverflow上发布实际代码（该代码永远不会起作用）

如果我明白你在做什么，这样的事情就可以了：

function DisplayNumImgChanged( a,b,c )
{
   var valueArray = [a, b, c];
   var imgElems = document.getElementsByClassName('thumb_child1');
   for (var i = 0 ; i < imgElems.length ; i++) {
       imgElems[i].src = './images/' +valueArray[i]+ '_blu.png';
   }
}
相关文章：