假设页面有很多相同模块,每个模块中都有一个标题,和一个标题的input框
<div> <span class="imgtitle" >标题1</span> <input type="text" value="" class="editimgtitle"> </div> <div> <span class="imgtitle" >标题2</span> <input type="text" value="" class="editimgtitle"> </div>
当点击imgtitle时,当前元素消失,editimgtitle显示,点击页面任何地方再切换回去
而input框中的值则赋在imgtitle中 主要使用方法
e.stopPropagation();
$("#mypiclist").delegate(".imgtitle","click",function(e){ e.stopPropagation(); var html = $(this).html(); $(this).hide(); $(this).next().show().val(html); $(this).next().focus(); }); $(document).bind('click',function(){ $(".editimgtitle").hide(); $(".imgtitle").show(); }); $("#mypiclist").delegate(".editimgtitle","focus",function(e){ var edit = $(this).parent().siblings().find(".editimgtitle"); //兄弟元素全部隐藏 edit.hide(); edit.prev(".imgtitle").show(); }); $("#mypiclist").delegate(".editimgtitle","click",function(e){ e.stopPropagation(); }); /* 单张图片blur时重命名 */ $("#mypiclist").delegate(".editimgtitle","blur",function(e){ var val = $(this).val(); $(this).prev().html(val); });