记录:jQuery editable

valueOf() JavaScript calls the valueOf method to convert an object to a primitive value. You rarely need to invoke the valueOf method yourself; JavaScript automatically invokes it when encountering an object where a primitive value is expected.(把数据还原成本来的样子) var classes = $(this).attr('class').split(" ");这里把element的class分割成array的格式。split(" ")split(", ")split(" ")split(/[ ,]+/)split(/\s+/)效果差不多有时间要学习一下正则表达式(regular expression)了。 然后再把想要的class分割再加入进想要的element。 blur() The blur event occurs when an element loses focus. The blur() method triggers the blur event, or attaches a function to run when a blur event occurs. 结合focus来用。

           function divClicked() {
              var divHtml = $(this).html();
              var classes = $(this).attr('class').split(" ");
              var class1 = classes[0].valueOf();将array转化成string
              var class2 = classes[1].valueOf();
              var editableText = $("<input>");
              editableText.addClass(class1 + " " + class2 + " " +"edit");
              editableText.val(divHtml);
              $(this).replaceWith(editableText);  //replaceWith取代对应的element里面的value
              editableText.focus();   //输入框的锁定
              // setup the blur event for this new textarea
              editableText.blur(editableTextBlurred);
            }

            function editableTextBlurred() {
              var html = $(this).val();
              var textareaclass = $(this).attr("class").split(" ");
              var class1 = textareaclass[0].valueOf();
              var class2 = textareaclass[1].valueOf();
              var viewableText = $("<div>");
              viewableText.addClass(class1 + " " + class2 + " " +"edit")
              viewableText.html(html);
              $(this).replaceWith(viewableText);
              // setup the click event for this new div
              viewableText.click(divClicked);
             }
              $(document).ready(function() {
                $(".edit").click(divClicked);
              });

循环alert出div的class HTML

<div id="item3" class="move up ss ff ff ee">
</div>
var classes = $('#item3').attr('class').split(' ');
for(var i=0; i<classes.length; i++){
  alert(classes[i]);
}

1 2 3 4