点击页面任何地方执行方法切换

假设页面有很多相同模块,每个模块中都有一个标题,和一个标题的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);
      });

 

posted @ 2015-04-15 10:07  雪宝贝_kang  阅读(419)  评论(0编辑  收藏  举报