Question

我过去做了大量的网络工作，但时间正在发生变化，一些刚落在我办公桌上的标记有一些我不理解但需要修改的功能。

有一个图标用于创建一个看起来像这样的新记录......

<span class="fa fa-plus-square large-icon-black" data-toggle="modal" data-target="#addRole"></span>

还有一个包含表格的DIV，并以模态方式显示。它看起来有点像......

<div class="modal fade" id="addRole" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

我确定项目中添加了一个库（Bootstrap可能??），它可以神奇地完成上述工作而不需要为其编写任何特定的javascript。

问题是可能有几个图标用于创建新记录但具有一些不同的键值。例如，我想将图标更改为这样......

<span class="fa fa-plus-square large-icon-black" data-param="123" data-toggle="modal" data-target="#addRole"></span>
<span class="fa fa-plus-square large-icon-black" data-param="456" data-toggle="modal" data-target="#addRole"></span>

在模态div中有一个表单，我需要能够将值设置为等于所点击图标的数据参数。

// ... inside modal div and form
<input type="hidden" value="???"> // <--- how to equal clicked data-param

注意！如果我使用javascript为图标制作onclick事件，我知道如何执行此操作。但由于目前没有专门编写的javascript来启动模态形式，我试图弄清楚是否有正确的方法。我宁愿不必改变模态形式的行为。

Answer 1

我想即使你知道完全逃避JavaScript也不是一个选择。由于调用modal完全是自定义的JavaScript，所以当调用这个Bootstrap模式时，让我们添加代码。

$('#addRole').on('show.bs.modal', function (e) {
  // Getting the caller element data
  var caller = $(e.relatedTarget);
  var param = $(caller).data('param');

  // Assignment
  $(input, $(this)).val(param);
});

如何将HTML数据属性值转换为模态表单？

1 个答案: