初学者全面接触学习jquery(译文)(5)

1. $('.saveButton'.click(function(){saveChanges(this, false;});
2. $('.cancelButton'.click(function(){saveChanges(this, revert;});

为两个按钮定义click事件。

1. .mouseover(function() {
2.    $(this.addClass("editable";
3.  })
4. .mouseout(function() {
5.    $(this.removeClass("editable";
6.  });

定义鼠标移入和移走事件。

接着定义saveChanges函数

1. function saveChanges(obj, cancel { ... }

如果cancle是false的话，那就意味着要保存编辑后的内容

1. if (!cancel {
2.    var t = $(obj.parent().siblings(0.val();
3.    // ...
4.  }

parent()对应的是input外面的div，siblings对应的是相邻的dom，0指的是前面的dom，也就是

1. <textarea rows="10" cols="60">' + $(this).html() + '</textarea>

接下来该来点关键的了

1. $.post("test2.php",{content: t},function(txt){
2.    alert(txt;
3.  });

jquery的ajax方法，.post表示以post方式提交，第一个参数是目标页面，在这里就是”test2.php”，第二个参数是提交的内容，最后是回调函数。txt是服务端传递过来的参数。

1. else {
2.    var t = cancel;
3.  }

如果cancle不为false的话，就执行revert()方法。

1. $(obj.parent().parent().after('<div id="editInPlace">'+t+'</div>'.remove() ;

移走textarea和button，恢复原状。
最后再调用setClickable方法就可以了，所有的js

1. $(document.ready(function(){
2. setClickable();
3. });
4.  
5. function setClickable() {
6. $('#editInPlace'.click(function() {
7. var textarea = '<div><textarea rows="10" cols="60">'+$(this.html()+'</textarea>';
8. var button     = '<div><input type="button" value="SAVE" class="saveButton" /> OR <input type="button" value="CANCEL" class="cancelButton" /></div></div>';
9. var revert = $(this.html();
10. $(this.after(textarea+button.remove();
11. $('.saveButton'.click(function(){saveChanges(this, false;});
12. $('.cancelButton'.click(function(){saveChanges(this, revert;});
13. })
14. .mouseover(function() {
15. $(this.addClass("editable";
16. })
17. .mouseout(function() {
18. $(this.removeClass("editable";
19. });
20. };
21.  
22. function saveChanges(obj, cancel {
23. if(!cancel {
24. var t = $(obj.parent().siblings(0.val();
25. $.post("test2.php",{
26.   content: t
27. },function(txt){
28. alert( txt;
29. });
30. }
31. else {
32. var t = cancel;
33. }
34. if(t=='' t='(click to add text)';
35. $(obj.parent().parent().after('<div id="editInPlace">'+t+'</div>'.remove();
36. setClickable();
37. }