Question

我的表格中有Divs。其中一些包含文本并具有数据属性（即数据名称）

我正在尝试创建JQUERY脚本，该脚本通过单击按钮来获取div内的所有DIVs属性和植入输入字段。

我不确定每个DIV的data属性如何创建数组。多谢您的帮助

getWindow().setLayout(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.MATCH_PARENT);

 contacts_dialog.setCancelable(true);
 contacts_dialog.setCanceledOnTouchOutside(true);
 contacts_dialog.show();

$(document).on("click", ".edit-btn", function(e) {
  var element = $(this);
  var data = $(element).parents(".item_edit").data();
  var fieldContent = convert_text_to_form_field(data)
  element.parents(".item").find(".item_edit").html(fieldContent);
});


// this function should get data array of attributes and return form field (input, textarea, etc)

function convert_text_to_form_field(data) {
  fieldValue = "** data something **"
  fieldName = "** data something **"
  fieldType = "** data something **"
  fieldRequire = "** data something **"
  maxFiles = "** data something **"

  switch (fieldType) {
    case "input":
      field = "<input type='text' name='" + fieldName + "' value='" + fieldValue + "' />";
      break;
    case "textarea":
      field = "<textarea type='text' name='" + fieldName + "'>" + fieldValue + "</textarea>";
      break;
    case "fileArray":
      field = "<input type='file' name='" + fieldName + "' class='multi well well-sm' maxlength='" + maxFiles + "' accept='gif|jpg|jpeg|png|bmp' />";
      break;
  };

  if (fieldRequire = 1)
    field = field + "<span>*</span>";
  return (field);
}

Answer 1

$(document).on("click", ".edit-btn", function(e) {
  var element = $(this);
  //var data = $(element).parents(".item_edit").data();
  //var fieldContent = convert_text_to_form_field(data)
  element.parents(".item").find(".item-edit").each((index, data) => convert_text_to_form_field($(data)));
});

function convert_text_to_form_field(data) {
  var field;
  var fieldValue = data.data("value") || "";
  var fieldName = data.data("name") || "";
  var fieldType = data.data("type") || "";
  var fieldRequire = data.data("require") || "";
  var maxFiles = data.data("maxFiles") || "";

  //console.log(fieldValue + '-' + fieldName + '-' + fieldType + '-' + fieldRequire + '-' + maxFiles);
  
  switch (fieldType) {
    case "input":
      field = "<input type='text' name='" + fieldName + "' value='" + fieldValue + "' />";
      break;
    case "textarea":
      field = "<textarea type='text' name='" + fieldName + "'>" + fieldValue + "</textarea>";
      break;
    case "fileArray":
      field = "<input type='file' name='" + fieldName + "' class='multi well well-sm' maxlength='" + maxFiles + "' accept='gif|jpg|jpeg|png|bmp' />";
      break;
  };

  if (fieldRequire == 1) {
    field = field + "<span>*</span>";
  }
  
  data.html(field);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form action='#' method='post' id="4" class='item'>
  <div class='item-edit' data-type='fileArray' data-name='file[]' data-maxFiles='1'>LOGO HERE</div>
  <div class='item-edit' data-type='input' data-name='agnt[name]' data-require='1'>SOME NAME</div>
  <div class='item-edit' data-type='textarea' data-name='agnt[contact]'>SOME CONTACT</div>
  <div class='col-md-2 panel-menu'>
    <span class='edit_msg'></span>
    <a href='#' class='btn btn-success edit_save-btn hidden'>SAVE</a>
    <a href='#' class='btn btn-success edit-btn'>EDIT</a>
  </div>
</form>

Answer 2

您可以使用JQuery replacewith解决您的问题。

只需获取带有标识符的元素，然后将内容替换为convert_text_to_form_field函数

$(document).on("click", ".edit_save-btn", function(e) {
  var element = $(this);
  var data = $(element).parents(".item_edit").data();
  var fieldContent = convert_text_to_form_field(data);
  $(".item").find("[data-type='" + data.fieldType + "']").replaceWith( fieldContent );
});

jQuery-将div文本转换为输入字段

2 个答案: