bugfix> jquery > 投稿

内部にDivがあるフォームがあります。 それらのいくつかはテキストを含み、データ属性を持っています(すなわち、データ名)

ボタンをクリックすることですべてのDIV属性を取得し、div内に入力フィールドを埋め込むJQUERYスクリプトを作成しようとしています。

各DIVのデータ属性の配列の作成方法がわかりません。 あなたの助けに感謝します

$(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);
}

<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>

回答 2 件
  • $(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>
    
    

  • 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 );
    });
    
    

あなたの答え