如何編輯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> 

注意我不具備的獨特的ID爲<li>標籤，只有其父母這是一個<ol></ol>的ID。

鉛筆圖標的onclick我打開一個模式，讓用戶編輯

$('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> 

在模式有一個保存按鈕。如何將這些數據保存回List視圖中？

感謝

現在我想知道我怎麼可以保存數據傳回在列表中。

Answer 1

您可以使用這樣li.data('url', $actionUrl.val())

正如一些提示這不是一個好主意，在全球範圍內暴露緩存li保存數據。

否則你可以像var li = $(this).parent().parent();

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

但是我的主要答覆保持相同

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>