javascript - 给出输入后更改图像

标签 javascript jquery html

我有一个带有 JavaScript 的小型基本 html 代码。我想要的只是当我输入 3 时,它应该显示指定的图像以及相应的 9 图像。这是演示。访问http://jsbin.com/UVOFeGIG/1/edit

它在那里工作。我不知道为什么 JavaScript 不能这样工作。有人能解决这个问题吗?

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

<script type="text/javascript">

var num2img = {
  "3":"visa",
  "9":"mastercard"
};

$('#num').on('input', function(){
  var val = this.value;
  if(val.length<=1){
     var n = this.value.charAt(0);
     if(val && num2img[n]!==undefined){
       $('#cardImage')[0].src = 'http://placehold.it/100x100/eee&text='+ num2img[n] +'.png';
     }else{
       $('#cardImage')[0].src = 'http://placehold.it/100x100/cf5';
     }
  }
});

</script>
<meta charset=utf-8 />
<title>Demo by Roko C.B.</title>
</head>
<body>

  <input id="num"><br>
  <img id="cardImage" src="http://placehold.it/100x100/cf5">

</body>
</html>

最佳答案

试试这个

$(document).ready(function(){

var num2img = {
  "3":"visa",
  "9":"mastercard"
};

    $('#num').keyup(function(){
      var val = this.value;
      if(val.length<=1){
         var n = this.value.charAt(0);
         if(val && num2img[n]!==undefined){
           $('#cardImage')[0].src = 'http://placehold.it/100x100/eee&text='+ num2img[n] +'.png';
         }else{
           $('#cardImage')[0].src = 'http://placehold.it/100x100/cf5';
         }
      }
    });
});

DEMO

关于javascript - 给出输入后更改图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20045861/

相关文章:

javascript - 尝试计算标记时 ajax 和 javascript 的问题

javascript - 在 Eleventy 中执行小型客户端 JavaScript 的最佳方式是什么?

javascript - 需要一个弹出窗口说明表单是否有效 - 无论如何都无效

javascript - 如何将 JavaScript onClick 处理程序添加到嵌入式 html 对象?

jquery - amplifyjs 解码器和 ajax beforeSend

javascript - 使用 JQuery 在隐藏的 DIV 上使用 toggle() 的问题

javascript - 获取moment js中两个日期字符串之间的差异?

python - Python 中的网页抓取动态内容

html - 如何让我的按钮响应?

javascript - 仅使用javascript动态添加div