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>

注意我没有<li>标记的唯一ID，只有其父级的ID为<ol></ol>。

点击铅笔图标我打开模态并让用户编辑

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

如何在Jquery中编辑元素的数据属性

1 个答案: