使用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");
  });
});