Question

我是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.
}

`

Answer 1

不要使用document.write（ever！）
将css放入样式标记
将javascript放入脚本标记
只在stackoverflow上发布实际代码（该代码永远不会工作）

Answer 2

好的，首先关闭：我强烈建议你应该学习和使用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';
}

（虽然以上代码未经测试，但如果您遇到问题，请回复。）

Answer 3

如果我明白你的意思，这样的事情可以起作用：

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';
   }
}

如何在DIV中更新新图像？

3 个答案: