javascript - 如何使用 ID 从点击事件的 JSON 文件中获取值并在表单中显示值

Question

我正在尝试查看和编辑两个单独的 DIV 标记上的数据。我已经实现了单击，甚至可以在 View 页面中编辑按钮的单击事件上显示编辑表单。现在我想要的是，如果我单击编辑按钮，我想获取特定项目值并将其填充到表单中。即，应检查复选框值、填写输入字段并选择单选按钮。这是我迄今为止的做法，

HTML:

<div class="panelList" id="panelList" hidden>
<form action="#" name="">
    <label class="uno">Panel Category:</label> 
    <span class="spec1">
    <input type="checkbox" value="1" name="panel2[]">&nbspRegular&nbsp&nbsp
    <input type="checkbox" value="2" name="panel2[]">&nbspReduced fee</input>&nbsp&nbsp
    <input type="checkbox" value="3" name="panel2[]">&nbspLimited Assistance Referral</input>&nbsp&nbsp
    <input type="checkbox" value="4" name="panel2[]">&nbspCourt Programs</input>
    </span>
    </br>
    <label class="uno">Group Panel:</label>
    <span class="spec2">
        <input type='text' list='listid2' id='gpanel2'>
        <datalist id='listid2' ></datalist>
    </span></br>
    <label class="uno">Panel Title :</label>
    <span class="spec3">
        <input type="text" name=""></br>
    </span>
    <label class="uno">Free Panel :</label>
    <span class="spec4">
      <input type="radio" name="free2" value="yes" checked>Yes
      <input type="radio" name="free2" value="no">No
    </span> 
    </br>
    <div id="fees2">
        <label class="uno">Fees $ :</label>
        <span class="spec5">
        <input type="text" id="fees3" name="fees3" disabled="disabled" >
        </span>
    </div>
    </br></br></br>
    <div class="col-md-offset-3">
    <input type="submit" class="btn btn-primary" value="Update" ></input>&nbsp&nbsp
    <input type="reset" class="btn btn-danger" id="cancel2" value="Cancel" onclick="cancelFunction();">
    </div>
</form>
</div>
<div class="addMember" id="addMember" ng-show="panel.isSelected(2)">
</div>

JS:

 function editFunction(value)
  {
    $("#panelList").show();
    $("#addMember").hide();
    $.getJSON("active.json"),function(result)
    {
        //console.log("hi");
        var categoryArray = result;

        for (var i = 0; i < categoryArray.length; i++) 
        {
            if (categoryArray[i].id == value) 
            {
                return(categoryArray[i]);

            }
        }
    }
    return true;
}

$.getJSON("active.json", function(result) 
{
    var panel_arr = ["", "Regular", "Reduced Fee", "Limited Assurance","Court Programs"];
    var ul_block = $("<ul/>");
    $.each(result, function(i, data) 
    {
        var panels = data.panel.split(",");
        var uli_block = $("<ul/>");
            $.each(panels, function(j, jdata)
            {
                var ulii_block = $("<ul/>");
                $(ulii_block).append($("<li/>").html(data.ptitle+'&nbsp&nbsp<a href="#epanel" id='+data.id+' class="btn btn-default active" role="button" onclick="editFunction(id);">Edit</a>'+'&nbsp&nbsp<a href="#" class="btn btn-default active" role="button">Delete</a>'));

                $(uli_block).append($("<li/>").html('<span class="Collapsable">'+panel_arr[panels[j]]+'</span>')).append(ulii_block);
            });
        $(ul_block).append($("<li/>").html('<span class="Collapsable">'+data.gpanel+'</span>').append(uli_block));
    });
    $("#addMember").append(ul_block);
    $(".Collapsable").click(function () {
      $(this).parent().children().toggle();
      $(this).toggle();
    });
    $(".Collapsable").each(function(){
      $(this).parent().children().toggle();
      $(this).toggle();
    });


});

JSON:

[  
{  
  "id":"1",
  "gpanel":"sfd",
  "ptitle":"sdffd",
  "panel":"1,4",
  "free":"yes",
  "fees":"0.00"
 },
 {  
  "id":"2",
  "gpanel":"sdfd",
  "ptitle":"sdfds",
  "panel":"4",
  "free":"yes",
  "fees":"0.00"
 },
 {  
  "id":"3",
  "gpanel":"sdf",
  "ptitle":"sdf",
  "panel":"4",
  "free":"yes",
  "fees":"0.00"
 },
 {  
  "id":"4",
  "gpanel":"sfd",
  "ptitle":"fes",
  "panel":"1",
  "free":"yes",
  "fees":"0.00"
 },
 {  
  "id":"5",
  "gpanel":"bbbfff",
  "ptitle":"hgffg",
  "panel":"1,2",
  "free":"yes",
  "fees":"0.00"
 }
 ]

Answer 1

要实现此功能，您不应将 id 传递给 editFunction，因为单击按钮时该变量将超出范围。

此外，当用户单击编辑按钮时再次向服务器请求数据似乎有些过分了。相反，您可以将相应的对象传递给editFunction。

注意:如果以后您具有改变该对象的功能，您将保持状态，并且当用户再次编辑该数据时，之前的更改仍然存在。

为了传递对象，重写一些生成 HTML 内容的代码会更实用:不要依赖 html 方法，而是使用 jQuery 方法来创建这些元素。然后，您可以轻松地将单击处理程序附加到可以访问数据对象的编辑按钮。

这是显示更改的代码片段。当然，我没有你的CSS，所以这看起来很难看，但它有效:

function editFunction(data) { // Pass all related data as argument
    $("#panelList").show();
    $("#addMember").hide();
    // Set form elements
    $('.spec1 input').prop('checked', false); 
    data.panel.split(",").forEach(function (jdata) {
        $('.spec1 input[value=' + jdata + ']').prop('checked', true); 
    });
    $('.spec2 input').val(data.gpanel);
    $('.spec3 input').val(data.ptitle);
    $('.spec4 input[value=' + data.free + ']').prop('checked', true);
    $('.spec5 input').val(data.fees);
    return false;
}

function processResult (result) {
    var panel_arr = ["", "Regular", "Reduced Fee", "Limited Assurance",
                     "Court Programs"];
    var ul_block = $("<ul/>");
    $.each(result, function(i, data) 
    {
        var panels = data.panel.split(",");
        var uli_block = $("<ul/>");
        $.each(panels, function(j, jdata)
        {
            var ulii_block = $("<ul/>");
            // Use jQuery methods for generating the content
            $edit = $('<a/>').attr('href', 'javascript:;')
                             .addClass('btn btn-default active')
                             .attr('role', 'button').text('Edit')
                             .css('margin-left', 5);
            $del = $('<a/>').addClass('btn btn-default active')
                             .attr('role', 'button').text('Delete')
                             .css('margin-left', 5);
            $(ulii_block).append(
                $("<li/>").text(data.ptitle).append($edit, $del));
            $(uli_block).append($("<li/>").append(
                    $('<span>').addClass("Collapsable").text(panel_arr[panels[j]])
            )).append(ulii_block);
            // ...so you can attach a click handler that passes an object as argument
            $edit.click(editFunction.bind(null, data));
        });
        $(ul_block).append($("<li/>").append(
             $('<span>').addClass("Collapsable").text(data.gpanel)
        ).append(uli_block));
    });
    $("#addMember").append(ul_block);
    $(".Collapsable").click(function () {
      $(this).parent().children().toggle();
      $(this).toggle();
    });
    $(".Collapsable").each(function(){
      $(this).parent().children().toggle();
      $(this).toggle();
    });
}

// This snippet does not do a request, so uncomment this:
//$.getJSON("active.json", processResult);

// Dummy data (exclude this when doing the real request)
processResult([  
{  
  "id":"1",
  "gpanel":"sfd",
  "ptitle":"sdffd",
  "panel":"1,4",
  "free":"yes",
  "fees":"0.00"
 },
 {  
  "id":"2",
  "gpanel":"sdfd",
  "ptitle":"sdfds",
  "panel":"4",
  "free":"yes",
  "fees":"0.00"
 },
 {  
  "id":"3",
  "gpanel":"sdf",
  "ptitle":"sdf",
  "panel":"4",
  "free":"yes",
  "fees":"0.00"
 },
 {  
  "id":"4",
  "gpanel":"sfd",
  "ptitle":"fes",
  "panel":"1",
  "free":"yes",
  "fees":"0.00"
 },
 {  
  "id":"5",
  "gpanel":"bbbfff",
  "ptitle":"hgffg",
  "panel":"1,2",
  "free":"no",
  "fees":"1.00"
 }
 ]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panelList" id="panelList" hidden>
<form action="#" name="">
    <label class="uno">Panel Category:</label> 
    <span class="spec1">
    <input type="checkbox" value="1" name="panel2[]">&nbspRegular&nbsp&nbsp
    <input type="checkbox" value="2" name="panel2[]">&nbspReduced fee</input>&nbsp&nbsp
    <input type="checkbox" value="3" name="panel2[]">&nbspLimited Assistance Referral</input>&nbsp&nbsp
    <input type="checkbox" value="4" name="panel2[]">&nbspCourt Programs</input>
    </span>
    </br>
    <label class="uno">Group Panel:</label>
    <span class="spec2">
        <input type='text' list='listid2' id='gpanel2'>
        <datalist id='listid2' ></datalist>
    </span></br>
    <label class="uno">Panel Title :</label>
    <span class="spec3">
        <input type="text" name=""></br>
    </span>
    <label class="uno">Free Panel :</label>
    <span class="spec4">
      <input type="radio" name="free2" value="yes" checked>Yes
      <input type="radio" name="free2" value="no">No
    </span> 
    </br>
    <div id="fees2">
        <label class="uno">Fees $ :</label>
        <span class="spec5">
        <input type="text" id="fees3" name="fees3" disabled="disabled" >
        </span>
    </div>
    </br></br></br>
    <div class="col-md-offset-3">
    <input type="submit" class="btn btn-primary" value="Update" ></input>&nbsp&nbsp
    <input type="reset" class="btn btn-danger" id="cancel2" value="Cancel" onclick="cancelFunction();">
    </div>
</form>
</div>
<div class="addMember" id="addMember" ng-show="panel.isSelected(2)">
</div>

现在由您编写代码，以便在用户单击“更新”按钮时将信息更新回对象中。