通过引导模式传递多个数据答案

【问题标题】：Passing multiple datas through bootstrap modal通过引导模式传递多个数据
【发布时间】：2014-09-30 10:03:26
【问题描述】：

我正在尝试使用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 不行。

【问题讨论】：

标签： javascript twitter-bootstrap modal-dialog

【解决方案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 = $('#todolink').data('todo').id;

var todo = $('#todolink').data('todo').todo;

【讨论】：

Nadeeth，我正在考虑这个解决方案，但我需要两个不同的变量。它们中的每一个都将用于不同的目的（识别）。
然后你可以尝试在数组中使用 JSON 对象。例如： [{"id":$todo_id, "todo":$todo_name}] 。我没有测试这个，如果它有效，请告诉我。 :-) 谢谢。
我测试过，效果很好。 jsfiddle.net/7j2h3Lu4 。我更新了答案。

【解决方案2】：

如果在显示数据时遇到一些语法问题，这将完美地工作。

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

这里不是 $todoName，而是，

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

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

【讨论】：

你的意思是OP应该在选择器中用#todoName替换$todoName？