记得两年前刚开始玩 flickr 的时候，贴心的使用体验一下子就征服了我。其中对一个更改照片主题的效果印象尤其深刻：鼠标移到照片的主题上，这条文本背景变成淡黄色；左键点击，文本变成输入框；输入新名字后回车，名字更改完毕。整个过程不像在操作网页，倒是像在使用文本编辑器。
由于对 html，javascript 所知甚少，隐藏在这神奇效果后面的技术令我叹服不止且念念不忘。随着后来看了一点点 Ajax 方面的东东，感觉到这应该是页面上的元素替换。这两天尝试了一下 jQuery，想起了这个当年让我耳目一新的页面效果，实现之：
-
-
$(document).ready( function() { //网页 ready 后加载此方法
-
$('span[id=email]') //定位到<span id="email">元素
-
.mouseover( function() { $(this).css("background-color",
-
"#ffff90") }) //鼠标移上<span id="email">元素后改其css里background-
-
color的值
-
.mouseout( function() { $(this).css("background-color",
-
"white") }) //鼠标移离<span id="email">元素后改其css里background-
-
color的值
-
.click( function() { //给<span id="email">元素绑定 click 事件
-
var origEmail = $(this).text() //取得<span>元素包含的文本
-
$(this).hide() //隐藏自身
-
$('<input name="email" value="' + origEmail + '" type="text"/>') //创建
-
一个<input>元素其值为原来的 email
-
.appendTo("div#email") //把该元素添加到<div id="email">中
-
.focus() //把焦点移到该元素上
-
.keydown( function(ev) { //绑定 keydown 事件
-
if (ev.which == 13) { //回车的键盘 key code 为 13
-
var email = $(this).val() //取出<input>元素此时的值
-
$(this).remove() //移除该<input>元素
-
$('span[id=email]').text(email).show() //显示
-
原来的<span>元素并将 email 添加其中
-
}
-
})
-
})
-
})
完成后，心情一阵悸动，哈哈，好久没这么爽了，两年来压在心头的谜团就这么解掉了。
示例页面：input_replace_span.html
更新：
上面的代码是精炼过的，本来面目可不是这样，花了许多时间 refine，将收获总结如下
1.用 hover 的方法可以替换 mouseover 和 mouseout，将两句话写在一句里面。但是在这个地方，hover 却还有些问题，input 变成 span 后，有时鼠标不在 span 上，它的背景色仍然是淡黄色（Fx 有此问题，IE 没有）
2.attr 修改属性的方法固然好，但是对于 style 属性因为 css 里面又有各种描述，所以 jQuery 做一个 css 方法不是白做的，理由见回复
3.在匿名函数里面，本元素用 $(this) 表示就 ok 了，没必要再用 selector 定位一次
4.span 在被 input 替换的时候，不用 remove，只用 hide 即可，到需要它的时候再 show 出来。这种方法明显对性能有好处，否则如果 remove 掉再 appendTo 进来时，还要重新绑定一系列事件响应函数
5.jQuery 的 API 文档里面对事件响应内的匿名函数的参数没有言及，它是可以传递参数的，代码里的 keydown 事件就传了 ev 进去
6.对于键盘响应的 key code，Fx 和 IE 支持的标准不同，网上的示例基本都是 key=window.event?ev.keyCode:ev.which 这样解决的。jQuery 包装了一层，所以在这里用 ev.which 即可
7.可以将 appendTo，keydown，focus 这些函数写在一条语句里面，不过保证性能的同时也要兼顾代码可读性
Write Less, Do More. Let's Go!
本站的feed
最新评论