Jquery에서 요소의 데이터 속성을 편집하는 방법

Question

일부 데이터 속성이있는 목록보기가 있습니다.

예

<li class="dd-item alert mar action" data-id=3 data-name="pushNotify" data-api="/api/v1/mailZoh" data-url="http://google.com" data-json="[{'data':'sss'}]"> 
    <div class="dd-handle">Push Notofication <span class="cust-close" data-dismiss="alert" aria-label="Close"><i class="fa fa-times"></i></span> &nbsp; <span class="edit cust-close" data-toggle="modal" data-target="#editAction"><i class="fa fa-pencil"></i></span></div> 
</li> 

주 내가 만이 <ol></ol>입니다 부모의 ID를 가지고는 <li> 태그의 고유 한 ID가없는 다음과 같다. 연필 아이콘의

온 클릭은 내가 모달를 열고 모달에서

$('body').on('click', '.edit', function() { 

    var li = $(this).parent().parent(); 
    $('#action_url').val(li.data('url')); 
    $('#action_api').val(li.data('api')); 
    $('#action_json').val(li.data('json')); 
    $('.action_name').html(li.data('name')); 
    $('#action_id').val(li.data('id')); 

}) 

모달

<div class="modal fade" id="editAction" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
    <form action="{{ route('wfengine/addWorkFlow') }}" method="POST"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="exampleModalLabel">Edit <span class="action_name" style="text-transform: capitalize"></span></h4> 
     </div> 
     <div class="modal-body"> 
      <input type="hidden" name="action_id" value="" /> 
      <div class="form-group"> 
      <label for="message-text" class="control-label">Api</label> 
      <input type="text" class="form-control" id="action_api" value='' /> 
      </div> 
      <div class="form-group"> 
      <label for="message-text" class="control-label">Url</label> 
      <input type="text" class="form-control" id="action_url" value='' /> 
      </div> 
      <div class="form-group"> 
      <label for="message-text" class="control-label">Json</label> 
      <input type="text" class="form-control" id="action_json" value='' /> 
      </div> 

     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="submit" class="btn btn-primary">Save Action</button> 
     </div> 
     </form> 
    </div> 
    </div> 
</div> 

는 저장 버튼이 있음을 사용자 편집을시키고있다. 해당 데이터를 목록보기에 다시 저장하려면 어떻게해야합니까?

감사

지금 나는 다시 목록에서 해당 데이터를 저장할 수있는 방법을 알고 싶습니다.

Answer 1

당신은 어떤 제안이 전역 범위에서 캐시 li 노출 좋은 생각이 아니다으로이 li.data('url', $actionUrl.val())

처럼 사용하여 데이터를 저장할 수 있습니다.

그렇지

당신은 var li = $(this).parent().parent();

$('[data-id="'+$actionid+'"]').data('url', $actionUrl.val()).data('api', $actionApi.val()).data('json', $actionJson.val()); 

처럼 할 수 있습니다하지만 내 주요 대답은 당신이 데이터의 값을 변경할 수있는`data` 기능을 사용하여 같은

var li; 
 
var $actionUrl = $('#action_url'); 
 
var $actionApi = $('#action_api'); 
 
var $actionJson = $('#action_json'); 
 
var $actionName = $('.action_name'); 
 
var $actionid = $('#action_id'); 
 
$('body').on('click', '.edit', function() { 
 

 
    li = $(this).parent().parent(); 
 
    $actionUrl.val(li.data('url')); 
 
    $actionApi.val(li.data('api')); 
 
    $actionJson.val(li.data('json')); 
 
    $actionName.html(li.data('name')); 
 
    $actionid.val(li.data('id')); 
 

 
}) 
 

 
$('button[type="submit"]').on('click', function() { 
 

 
    li.data('url', $actionUrl.val()).data('api', $actionApi.val()).data('json', $actionJson.val()); 
 

 
})

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<ul> 
 
    <li class="dd-item alert mar action" data-id=3 data-name="pushNotify" data-api="/api/v1/mailZoh" data-url="http://google.com" data-json="[{'data':'sss'}]"> 
 
    <div class="dd-handle">Push Notofication <span class="cust-close" data-dismiss="alert" aria-label="Close"><i class="fa fa-times"></i></span> &nbsp; <span class="edit cust-close" data-toggle="modal" data-target="#editAction"><i class="fa fa-pencil"></i></span> 
 
    </div> 
 
    </li> 
 
</ul> 
 

 
<div class="modal fade" id="editAction" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" style="display: none"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <form action="{{ route('wfengine/addWorkFlow') }}" method="POST"> 
 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span> 
 
      </button> 
 
      <h4 class="modal-title" id="exampleModalLabel">Edit <span class="action_name" style="text-transform: capitalize"></span></h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
      <input type="hidden" name="action_id" value="" /> 
 
      <div class="form-group"> 
 
      <label for="message-text" class="control-label">Api</label> 
 
      <input type="text" class="form-control" id="action_api" value='' /> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label for="message-text" class="control-label">Url</label> 
 
      <input type="text" class="form-control" id="action_url" value='' /> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label for="message-text" class="control-label">Json</label> 
 
      <input type="text" class="form-control" id="action_json" value='' /> 
 
      </div> 
 

 
     </div> 
 
     <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
      <button type="submit" data-toggle="modal" data-target="#editAction" class="btn btn-primary">Save Action</button> 
 
     </div> 
 
     </form> 
 
    </div> 
 
    </div> 
 
</div>