多个可编辑的字段使用jQuery单击一次

Question

我试图创建一个表单，允许用户编辑它，类似于旧的Facebook配置文件编辑风格。我无法弄清楚如何同时更改一节中的所有元素。我可以一次编辑一个，但不是全部。

HTML：

<div id="wrapper"> 
    <section id="core"> 
     <div class="profileinfo"> 

      <div class="gear"> 
       <label>Primary E-Mail:</label><br /> 
       <span id="pemail" class="datainfo">myaddress@googlemail.com</span> 
       <a href="#" class="editlink">Edit Info</a> 
       <a class="savebtn">Save</a> 
      </div> 

      <div class="gear"> 
       <label>Full Name:</label><br /> 
       <span id="first" class="datainfo">Johnny</span> 
       <span id="middle" class="datainfo">James</span> 
       <span id="last" class="datainfo">Appleseed</span> 
       <a href="#" class="editlink">Edit Info</a> 
       <a class="savebtn">Save</a> 
      </div> 

      <div class="gear"> 
       <label>Birthday:</label><br /> 
       <span id="birthday" class="datainfo">August 21, 1989</span> 
       <a href="#" class="editlink">Edit Info</a> 
       <a class="savebtn">Save</a> 
      </div> 

      <div class="gear"> 
       <label>Address:</label><br /> 
       <span id="address1" class="datainfo">123 Test Lane</span><br /> 
       <span id="address2" class="datainfo">APT 104</span><br /> 
       <span id="city" class="datainfo">Anywhere</span> 
       <span id="state" class="datainfo">FL</span> 
       <span id="zip" class="datainfo">55555</span> 
       <a href="#" class="editlink">Edit Info</a> 
       <a class="savebtn">Save</a> 
      </div> 

      <div class="gear"> 
       <label>Occupation:</label><br /> 
       <span id="occupation" class="datainfo">Freelance Web Developer</span> 
       <a href="#" class="editlink">Edit Info</a> 
       <a class="savebtn">Save</a> 
      </div> 
     </div> 
    </section> 
</div> 

的Javascript：

$(document).ready(function(){ 
$(".editlink").on("click", function(e){ 
    e.preventDefault(); 
    var dataset = $(this).prev(".datainfo"); 
    var savebtn = $(this).next(".savebtn"); 
    var theid = dataset.attr("id"); 
    var newid = theid+"-form"; 
    var currval = dataset.text(); 

    dataset.empty(); 

    $('<input type="text" name="'+newid+'" id="'+newid+'" value="'+currval+'" class="hlite">').appendTo(dataset); 

    $(this).css("display", "none"); 
    savebtn.css("display", "block"); 
}); 
$(".savebtn").on("click", function(e){ 
    e.preventDefault(); 
    var elink = $(this).prev(".editlink"); 
    var dataset = elink.prev(".datainfo"); 
    var newid = dataset.attr("id"); 

    var cinput = "#"+newid+"-form"; 
    var einput = $(cinput); 
    var newval = einput.attr("value"); 

    $(this).css("display", "none"); 
    einput.remove(); 
    dataset.html(newval); 

    elink.css("display", "block"); 
}); 
}); 

编辑

这是类似于我希望它看起来像一个形象：

如何建立编辑每个部分的能力？这里有一个JSFiddle供您查看。

Answer 1

这可能不是最好的方法，但这会做你想做的。

$(document).ready(function(){ 
    $(".editlink").on("click", function(e){ 
    e.preventDefault(); 
    var datasets = $(this).prevAll(".datainfo"); 
    var savebtn = $(this).next(".savebtn"); 
    datasets.each(function(){ 
     var theid = $(this).attr("id"); 
     var newid = theid+"-form"; 
     var currval = $(this).text(); 
     $(this).html('<input type="text" name="'+newid+'" id="'+newid+'" value="'+currval+'" class="hlite">'); 
    }); 

    $(this).css("display", "none"); 
    savebtn.css("display", "block"); 
    }); 

    $(".savebtn").on("click", function(e){ 
    e.preventDefault(); 
    var elink = $(this).prev(".editlink"); 
    var datasets = $(this).prevAll(".datainfo"); 
    datasets.each(function(){ 
     var newid = $(this).attr("id"); 
     var einput = $("#"+newid+"-form"); 
     var newval = einput.val(); 
     einput.remove(); 
     $(this).html(newval); 
    }); 

    $(this).css("display", "none"); 
    elink.css("display", "block"); 
    }); 
});