南通SEO,南通网络营销顾问任伟SEO博客

首页> 任伟个人博客> 工作笔记 > 实现input修改内容显示对应图片-input propertychange
171Views

实现input修改内容显示对应图片-input propertychange

作者: 发布于 0 条评论 字体大小[]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>实现input修改内容显示对应图片-input propertychange</title>
<script type="text/javascript" src="http://mfjy.renweiseo.com/include/js/jquery.js"></script>
</head>

<body>
<p id="p4">
  <input type="text" id="mytext4" name="test" class="txt" value="change"/>
  <img src='' id="imgmytext4"/></p>
<p id="p5">
  <input type="text" id="mytext5" name="test" class="txt" value="change"/>
  <img src='' id="imgmytext5"/></p>
<p id="p6">
  <input type="text" id="mytext6" name="test" class="txt" value="change"/>
  <img src='' id="imgmytext6"/> </p>
<script>
$(document).ready(function(){
$("input").each(function(){
	var id='img'+($(this).attr('id'));//获取对应的input id对应的img id
	 
$(this).bind('input propertychange',function(){  
        var txtChange = $(this).val();  	
		$("#"+id).attr("src",txtChange);	
      
    });  
});
});
</script>
</body>
</html>


分享来源: 任伟SEO博客 转载请注明出处!(QQ交流:547701130/微信:renweiseo/微信公众号:renwei_seo)
原文地址:http://www.renweiseo.com/note/view/4422.html
发布于 2019-07-12 13:39:44 已有0人评论 任伟 作者保留权利

发表评论

必填

选填

选填

必填

已有0人参与,欢迎参与讨论,请在这里发表您的看法、交流您的观点。

亲!看完有什么想法呢?
  • 流泪

    0

  • 打酱油

    0

  • 开心

    0

  • 鼓掌

    0

  • 恐怖

    0

作者介绍

  • 任伟
  • • 主页:
    • 文章:
    • 邮箱:

    命是弱者的借口,运是强者的谦辞。

    控制面板

    您好,欢迎到访网站!
      查看权限
    «   2019年9月   »
    1
    2345678
    9101112131415
    16171819202122
    23242526272829
    30

    猜你喜欢