我正在尝试将一些自定义数据属性传递给通过链接打开的模式。
HTML代码段如下:
<div class="btn-group">
<button aria-expanded="false" class="btn btn-xs green dropdown-toggle" data-toggle="dropdown" id="button_action" type="button">Action <i class="fa fa-angle-down"></i></button>
<ul class="dropdown-menu" role="menu">
<li>
<a id="modal_contact" data-userName="User1" data-toggle="modal" href="#option_contact">
<i class="fa fa-check-square-o"></i> Contact</a>
</li>
</ul>
</div>
模态片段如下:
<div class="modal fade" data-backdrop="static" data-keyboard="false" id="option_contact" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" class="close" data-dismiss="modal"
type="button"></button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
我似乎无法使用属性“ data-userName ”的值设置“模态标题”。
我认为jquery会这样做(只插入警告以查看是否传递了值):
$('#modal_contact').on('click', function() {
var $el = $(this);
var $username = $el.data('userName');
alert(username);
});
但它似乎不起作用。什么是正确的方法?
答案 0 :(得分:1)
尝试使用bootstrap模式的事件回调而不是单击处理程序:
$('#option_contact').on('shown.bs.modal', function() {
var $el = $("#modal_contact");
var $username = $el.data('userName');
alert(username);
});
答案 1 :(得分:1)
为了设置数据,请不要使用camelCase表示法。 Insted使用类似data-user_name="User1"
$('#modal_contact').on('click', function() {
var $el = $(this);
var $username = $(this).data('user_name');
alert($username);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group">
<button aria-expanded="false" class="btn btn-xs green dropdown-toggle" data-toggle="dropdown" id="button_action" type="button">Action <i class="fa fa-angle-down"></i></button>
<ul class="dropdown-menu" role="menu">
<li>
<a id="modal_contact" data-user_name="User1" data-toggle="modal" href="#option_contact">
<i class="fa fa-check-square-o"></i> Contact</a>
</li>
</ul>
</div>
<div class="modal fade" data-backdrop="static" data-keyboard="false" id="option_contact" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" class="close" data-dismiss="modal"
type="button"></button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
注意强>
data- *属性由两部分组成:
答案 2 :(得分:1)
请查看下面的代码段。你会找到正确的用户名。在您的代码中,您提到了“userName”来获取应该是“username”的属性值。
$(document).ready(function(){
$('#modal_contact').on('click', function() {
var $el = $(this);
var $username = $el.data('username');
alert($username);
$(".modal-title").html($username);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group">
<button aria-expanded="false" class="btn btn-xs green dropdown-toggle" data-toggle="dropdown" id="button_action" type="button">Action <i class="fa fa-angle-down"></i></button>
<ul class="dropdown-menu" role="menu">
<li>
<a id="modal_contact" data-userName="User1" data-toggle="modal" href="#option_contact">
<i class="fa fa-check-square-o"></i> Contact</a>
</li>
</ul>
</div>
<div class="modal fade" data-backdrop="static" data-keyboard="false" id="option_contact" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" class="close" data-dismiss="modal"
type="button"></button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
答案 3 :(得分:1)
这是预览code solution
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@2.2.0" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script data-require="bootstrap.js@*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script>
$(document).ready(function() {
$('#modal_contact').on('click', function() {
var userName = $(this).attr("data-userName");
$('.modal-title').append(userName);
});
});
</script>
</head>
<body>
<div class="btn-group">
<button aria-expanded="false" class="btn btn-xs green dropdown-toggle" data-toggle="dropdown" id="button_action" type="button">Action <i class="fa fa-angle-down"></i></button>
<ul class="dropdown-menu" role="menu">
<li>
<a id="modal_contact" data-userName="User1" data-toggle="modal" href="#option_contact">
<i class="fa fa-check-square-o"></i> Contact</a>
</li>
</ul>
</div>
<div class="modal fade" data-backdrop="static" data-keyboard="false" id="option_contact" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" class="close" data-dismiss="modal" type="button"></button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</body>
</html>