Question

我正在尝试使用data-todo属性对多个数据执行相同操作，但它不起作用。你能帮帮我吗？

JAVASCRIPT：

$(document).on("click", ".open-EditTodo", function () {
    var todoId = $(this).data('id');
    var todoName = $(this).data('todo');
    $(".modal-body #todoId").val( todoId );
    $(".modal-body $todoName").val( todoName );
});

HTML：

<a href="#editTodoDialog" class="open-EditTodo btn btn-warning" data-toggle="modal" data-id="$todo_id" data-todo="$todo_name">EDIT</a>

<div class="modal fade" tabindex="-1" role="dialog" style="margin-top: 200px;" id="editTodoDialog">
  <div class="modal-dialog" align="center">
    <div class="modal-content" style="width: 350px;">
      <div class="modal-header" align="left">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Edit to-do:</h4>
      </div>
      <div class="modal-body" align="center" style="height: 65px;">
        <form class="form-inline" role="form" method="post" action="todo.php">
          <div class="form-group">
            <input type="text" name="todoName" id="todoName" value="" class="form-control" style="width: 230px;">
            <input type="hidden" name="todoId" id="todoId" value="">
            <button type="submit" class="btn btn-warning"><span class="glyphicon glyphicon-edit"></span> Edit</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

顺便说一下，data-id工作正常，但data-todo没有。

Answer 1

您可以将这两个数据项放在一起。

例如：

<a id="todolink" href="#editTodoDialog" class="open-EditTodo btn btn-warning" data-toggle="modal" data-todo='{"id":12,"todo":"xyz"}'>EDIT</a>

现在您可以像这样检索数组：

var todoId = $（＆＃39;＃todolink＆＃39;）。data（＆＃39; todo＆＃39;）。id;

var todo = $（＆＃39;＃todolink＆＃39;）。data（＆＃39; todo＆＃39;）。todo;

Answer 2

这样可以完美地显示数据时出现语法问题。

$(".modal-body $todoName").val( todoName );

这里代替$ todoName，

$(".modal-body #todoName").val( todoName );

否则，没有其他问题意味着您可以使用两个不同的数据属性来传递数据。

通过bootstrap模式传递多个数据

2 个答案: