无法使用jquery在Keno面板栏中获取正确的值

Question

一般信息

我已经构建了一个用数据填充的剑道面板栏，它有一个选项，让用户能够编辑面板展开时显示的预先填充的数据。面板栏嵌套在列表视图中，当面板展开时显示的HTML来自Kendo模板。

当前问题

当a面板展开，用户选择编辑内容并添加时，他们会按批准按钮添加，但我收到的文本不正确。我只得到了应该位于第一个面板中的信息。无论我选择编辑和添加哪个面板，我都只推送位于第一个面板中的数据。

Html

<div class="padding" style="display:none;" id="ApprovalFormWindow">
    <div class="container">
        <!--<div id="descriptionColumn" style="display:none"><b id="description">Title</b><b id="date">Modified Date</b></div>-->
        <div id="descriptionColumn" style="display:none">
            <div style="width: 95%; display: table;">
                <div style="display: table-row">
                    <div style="width: 40px; display: table-cell; vertical-align:top;"><b>Title</b></div>
                </div>
            </div>
        </div>
        <ul id="listView" style="display:none"></ul>
        <div id="pager" style="display:none"></div>
    </div>
</div>
<script type="text/x-kendo-tmpl" id="ApprovalContentTemplate">
<li>
    <table style="width: 95%;">
        <tr>
            <td class="selectedValue" style="width:40%; vertical-align:top;">#:Description#</td>
        </tr>
    </table>
    <div id="topTabPanel" style="margin-top: -4px; padding-top: 5px; padding-bottom: 5px; border: 1px solid lightgray !important">
        <label style="margin-left : 5px;" for="EditCheckBox">
            Edit<input class="editBox" type="checkbox" id="EditCheckBox" value="true" style="margin-left: 5px;">
        </label>
            <button type="button" class="PreviewItem" style="border: 2px none; border-radius: 25px; margin-left: 15px;">Preview</button>
            <button type="button" class="ApproveItem" style="border: 2px none; border-radius: 25px; margin-left: 15px;">Approve</button>           
    </div>
    <div id ="PanelSelected" class="row demo-section k-content" style="border-top: 4px solid dodgerblue; border-bottom: 4px solid dodgerblue;">
        <div class="col-xs-11" style="margin-top: 5px;">
            <form class="form-inline">
                <div class="form-group">
                    <label for="Title" class="required">Title</label>
                    <div><textarea class="k-textbox ApproversPanel" id="Title" name="Title" style="width: 220px;" readonly>#:Name#</textarea></div>
                </div>
                <div class="form-group">
                    <label for="KeyWords" class="required">KeyWords</label>
                    <div><textarea class="k-textbox ApproversPanel" id="KeyWords" name="KeyWords" style="width: 220px;" readonly>#:KeyWords#</textarea></div>
                </div>
                <div class="form-group">
                    <label for="jandra" class="required">Description</label>
                    <div><textarea class="k-textbox ApproversPanel" id="jandra" name="jandra" style="width: 220px;" readonly>#:jandra#</textarea></div>
                </div>
                <div class="form-group">
                    <label for="Summary" class="required">Summary</label>
                    <div><textarea class="k-textbox ApproversPanel" id="Summary" name="Summary" style="height: 100px; width: 220px;" readonly>#:Summary#</textarea></div>
                </div>
            </form>
        </div>
    </div>
</li>

Javascript

serverResponse = [
{
    Name: "Test1",
    KeyWords: "KeyWord1",
    jandra: "Country",
    Summary: "Test Item 1",
},
 {
     Name: "Test2",
     KeyWords: "KeyWord2",
     jandra: "Rap",
     Summary: "Test Item 2",
 },
  {
      Name: "Test3",
      KeyWords: "KeyWord3",
      jandra: "Pop",
      Summary: "Test Item 3",
  },
   {
       Name: "Test4",
       KeyWords: "KeyWord4",
       jandra: "Rock",
       Summary: "Test Item 4",
   },
    {
        Name: "Test5",
        KeyWords: "KeyWord5",
        jandra: "Blues",
        Summary: "Test Item 5",
    },
];
var selectedContent;
$("#listView").kendoListView({
dataSource: serverResponse,
autoBind: false,
pageable: true,
template: kendo.template($("#ApprovalContentTemplate").html()),
dataBound: function () {
    $("#listView").kendoPanelBar({
        // Made it single, however multiple would be nice
        expandMode: "single",
        select: function (e) {
            var retrievedContent = serverResponse._data;
            for (var x = 0; x < retrievedContent.length; x++) {
                if (e.item.dataset.uid === retrievedContent[x].uid) {
                    selectedContent = retrievedContent[x];
                }
            }
        },
    });
    $(".editBox").each(function (e) {
        $(this).click(function (d) {
            if ($(this).is(":checked")) {
                $(".ApproversPanel").attr("readonly", false);
            }
            else {
                $(".ApproversPanel").attr("readonly", true);
                $("#ListItemTitle").val(selectedContent.Name);
                $("#ListItemKeyWords").val(selectedContent.KeyWords);
                $("#ListItemDescription").val(selectedContent.Description);
                $("#ListItemSummary").val(selectedContent.ContentSummary);
                var testThis = 0;
            }
        });
    });
    $(".PreviewItem").each(function (e) {
        $(this).click(function (d) {
            // Logic not built 
        });
    });
    $(".ApproveItem").each(function (e) {
        $(this).click(function (d) {
            var value = $("#PanelSelected").find(".ApproversPanel").children();
            /*
             * when a person push this to the datasource it will always push
             * the first object in the array no mattyer what panel they selected to edit 
             *   Name: "Test1",
             *   KeyWords: "KeyWord1",
             *   jandra: "Country",
             *   Summary: "Test Item 1",
             */
            GetCurrentValue();
        });
    });
    function GetCurrentValue() {
        $(".ApproversPanel").each(function (e) {
            var title = $("#Title").val();
            var KeyWords = $("#KeyWords").val();
            var Description = $("#jandra").val();
            var ContentSummary = $("Summary").val();
            /*
           *   This gives me the same results.  not matter what panel I selected to edit and 
           *   add I always get the first object.
           *   Name: "Test1",
           *   KeyWords: "KeyWord1",
           *   jandra: "Country",
           *   Summary: "Test Item 1",
           */
        });
    };
},

})；

Answer 1

嗯。。。您有5个面板，每个面板都包含一组具有相同id和名称的文本框。id必须是唯一的。当jquery假设一个唯一的id并停止时(它不知道您想要具有相同id的第四个输入(，id上的GetCurrentValue((中的jquery选择器将始终返回第一个，并且仅返回第一个。您必须以某种方式使每个面板都是唯一的，并使用适当的选择器。

例如，您可以将"批准"按钮更改为

$(".ApproveItem").each(function (e) {
    $(this).click(function (d) {
      var panel = $($(this).closest("li"));
      var data = {
        Name: panel.find("#Title").val(),
        KeyWords: panel.find("#KeyWords").val(),
        jandra: panel.find("#jandra").val(),
        Summary: panel.find("#Summary").val()
      }
      console.log(data);
        //var value = $("#PanelSelected").find(".ApproversPanel").children();
        /*
         * when a person push this to the datasource it will always push
         * the first object in the array no mattyer what panel they selected to edit 
         *   Name: "Test1",
         *   KeyWords: "KeyWord1",
         *   jandra: "Country",
         *   Summary: "Test Item 1",
         */
        //GetCurrentValue();
    });
});

这将获得对与单击的按钮相关联的面板的引用(使用最接近的(，然后使用该引用来细化数据选择器，以找到正确面板的子面板。

http://dojo.telerik.com/@Stephen/avitO

我确信使用Kendo的MVVM有更好的方法可以做到这一点(与这里的技术类似，但不完全相同：https://stackoverflow.com/a/37998096/4825632)或者向所选面板添加/删除类以用于构建更具体的选择器。