Passing multiple datas through bootstrap modal(通过引导模式传递多个数据)
问题描述
我正在尝试使用 data-todo
属性对多个数据执行相同的操作,但它不起作用.你能帮帮我吗?
I'm trying to do the same with multiple data, with data-todo
attribute, but it doesn't work. Could you help me?
JAVASCRIPT:
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">×</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
不行.
By the way, data-id
works just fine, but data-todo
doesn't.
推荐答案
你可以把这两个数据项放在一起.
You can put those two data items together.
例如:
<a id="todolink" href="#editTodoDialog" class="open-EditTodo btn btn-warning" data-toggle="modal" data-todo='{"id":12,"todo":"xyz"}'>EDIT</a>
现在您可以像这样检索数组:
Now you can retrieve the array like this:
var todoId = $('#todolink').data('todo').id;
var todoId = $('#todolink').data('todo').id;
var todo = $('#todolink').data('todo').todo;
var todo = $('#todolink').data('todo').todo;
这篇关于通过引导模式传递多个数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:通过引导模式传递多个数据
基础教程推荐
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- Chart.js 在线性图表上拖动点 2022-01-01
- 直接将值设置为滑块 2022-01-01
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01