Question

我对javascripting很新，也许答案很简单，但我不明白。我想通过文本框中的输入更改图像。因此，图片路径的一部分应该被输入到文本框中的值替换。它适用于一张图片和一个文本框，但我想要至少10个文本框，并且应将单个值分配给10张图片中的一张。此外，到目前为止我必须重新加载页面以再次更改图片。这不应该是这种情况。有人可以给我一个提示或解决方案吗？我google了很多，但我不知道我应该搜索什么。微小的资源来源......

感谢

javascript部分：

window.onload = function()
{
document.getElementById( 'inpPG' ).onchange = keyUpPG;
}

function keyUpPG()
{
var img = document.getElementById( 'pg' );
img.src = img.src.replace( /chris_paul.png/ , this.value + '.png');
}

window.onload = function()
{
document.getElementById( 'inpSG' ).onchange = keyUpSG;
}

function keyUpSG()
{
var img = document.getElementById( 'sg' );
img.src = img.src.replace( /eric_gordon.png/ , this.value + '.png');
}

依旧......

和身体部分：

<center>
PF <input type="text" id="inpPF"> C <input type="text" id="inpC"> SF <input type="text" id="inpSF"><br>

<img id="pf" src="http://i.cdn.turner.com/nba/nba/.element/img/2.0/sect/statscube/players/large/kevin_love.png">
<img id="c" src="http://i.cdn.turner.com/nba/nba/.element/img/2.0/sect/statscube/players/large/joakim_noah.png">
<img id="sf" src="http://i.cdn.turner.com/nba/nba/.element/img/2.0/sect/statscube/players/large/harrison_barnes.png">

<br>PG <input type="text" id="inpPG"> SG <input type="text" id="inpSG"><br>
<img id="pg" src="http://i.cdn.turner.com/nba/nba/.element/img/2.0/sect/statscube/players/large/chris_paul.png">
<img id="sg" src="http://i.cdn.turner.com/nba/nba/.element/img/2.0/sect/statscube/players/large/eric_gordon.png">

<br><input type="button" value="Reload Page" onClick="window.location.href=window.location.href">
</center>

Answer 1

使用jquery

就像这样简单

 $('#inpPG').on('change', function() {
          $('#pg').attr('src','http://i.cdn.turner.com/nba/nba/.element/img/2.0/sect/statscube/players/large/'+this.value);
        });

    $('#inpSG').on('change', function() {
              $('#sg').attr('src','http://i.cdn.turner.com/nba/nba/.element/img/2.0/sect/statscube/players/large/'+this.value);
            });

<强> JSFIDDLE EXAMPLE

在PG或SG TEXTBOX中输入 - ＆gt; kevin_love.png进行测试

通过文本框更改多个图像（javascript）

1 个答案: