Несколько редактируемых полей одним щелчком мыши с помощью 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"); 
}); 
}); 

EDIT

Вот изображение, похожее на то, что я хочу, чтобы это выглядело как:

Как создать возможность редактировать каждый раздел? Вот вам 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"); 
    }); 
});