Question

我是JavaScript的新手，我正在尝试显示根据用户输入的ID而变化的图像。

下面我宣布了一个变量＆＃34; icon＆＃34;存储url + icon id + .png的值以完成url：

icon = "http://ddragon.leagueoflegends.com/cdn/6.2.1/img/profileicon/" + summonerIcon + ".png"

此变量可包含的示例是："http://ddragon.leagueoflegends.com/cdn/6.2.1/img/profileicon/14.png"

我想使用此变量中的信息显示在我的html页面上，因此当用户输入用户名时，javascript应返回与用户提交的ID匹配的图像。

这些图片都存储在上面显示的网址上，不会存储在本地。

感谢您阅读我的问题。

Answer 1

使用jQuery挂钩输入上的更改事件，该事件将指示ID，然后将值拉入图标变量。

HTML

function getVals() {
  var icon = $( "#id" ).val();
}

$( "input" ).change( getVals );
getVals();

JS

self.number_row

您必须调整getVals函数才能重新渲染您正在显示的图像，但这应该指向正确的方向。

Answer 2

这使用jquery插件。

<script type="text/javascript" src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('#btnLoad').click(function(e){
            var baseUrl ='http://ddragon.leagueoflegends.com/cdn/6.2.1/img/profileicon/';
            $('#iconHolder').attr('src', baseUrl + $('#iconId').val() + '.png');
        });
    });
</script>
Icon Id <input id="iconId" /><button id="btnLoad">Load</button>
<br/>
<img id="iconHolder" />

根据ID使用javascript更改html网页上的图像

2 个答案: