twitter-bootstrap 将数据 ID 传递给引导模式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32941323/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
pass data-id to bootstrap modal
提问by num
I have a problem to show data-idwith bootstrap modal. here is my scripts
我有一个问题要显示data-id引导模式。这是我的脚本
<a class="btn btn-warning btn-minier" href="#modal-form-edit" role="button" data-toggle="modal" data-id="<?php echo $row['product_names']; ?>"><i class="icon-edit bigger-120"></i> Edit</a>
Modal
模态
<div id="modal-form-edit" class="modal hide" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="blue bigger">Products</h4>
</div>
<div class="modal-body overflow-visible">
<div class="row-fluid">
<div class="vspace"></div>
<div class="span7">
<div class="control-group">
<label class="control-label" for="form-field-username">Product Name</label>
<div class="controls">
<input type="text" name="product_name" placeholder="Product Name" value="" id="product_name" />
</div>
</div>
JS
JS
$('#modal-form-edit').on('show', function () {
var product = $(this).data('id');
$("#product_name").val($(this).data('product'));
})
The problem is, data-iddoesn't show the value ($row['product_names']).
问题是，data-id不显示 value ($row['product_names'])。
When I change
当我改变
var product = $(this).data(id)
to
到
var product = "test";
the modal show "test". Any help I'll appreciate
模态显示“测试”。任何帮助我将不胜感激
回答by Rohan Kumar
You need to get the anchor tag data-idnot using thislike,
你需要得到data-id不使用this像的锚标签，
var product = $('a[href="#modal-form-edit"]').data('id');
UPDATEDAnd if you have multiple edit links then to get the clicked anchor tag data-id you should use e.relatedTarget
更新如果您有多个编辑链接，那么要获得点击的锚标记数据 ID，您应该使用e.relatedTarget
// using latest bootstrap so, show.bs.modal
$('#modal-form-edit').on('show.bs.modal', function(e) {
var product = $(e.relatedTarget).data('id');
$("#product_name").val(product);
});<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<a class="btn btn-warning btn-minier" href="#modal-form-edit" role="button" data-toggle="modal" data-id="Product 1"><i class="icon-edit bigger-120"></i> Edit</a>
<a class="btn btn-warning btn-minier" href="#modal-form-edit" role="button" data-toggle="modal" data-id="Product 2"><i class="icon-edit bigger-120"></i> Edit</a>
<div id="modal-form-edit" class="modal" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="blue bigger">Products</h4>
</div>
<div class="modal-body overflow-visible">
<div class="row-fluid">
<div class="vspace"></div>
<div class="span7">
<div class="control-group">
<label class="control-label" for="form-field-username">Product Name</label>
<div class="controls">
<input type="text" name="product_name" placeholder="Product Name" value="" id="product_name" />
</div>
</div>
</div>
<!--span7-->
</div>
</div>
<!-- modal-body-->
</div>