jQuery在单击链接时将数据属性传递给模式

Question

我试图将一些自定义数据属性传递给通过链接打开的模式。

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 ”的值设置“ modal-title ”。

我认为的jQuery会这样做（仅插入警报以查看是否传递了值）：

$('#modal_contact').on('click', function() {
  var $el = $(this);
  var $username = $el.data('userName');
    alert(username);
  });

但这似乎不起作用。 什么是正确的方法呢？

Answer 1

尝试使用引导模式的事件回调，而不是单击处理程序：

$('#option_contact').on('shown.bs.modal', function() {
  var $el = $("#modal_contact");
  var $username = $el.data('userName');
  alert(username);
});

Answer 2

为了设置数据，请不要使用camelCase表示法。 插入使用这样的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- *属性由两部分组成：

1. 属性名称不得包含任何大写字母，并且前缀“ data-”后必须至少长一个字符
2. 属性值可以是任何字符串

Answer 3

请检查以下片段。 您会正确找到用户名。 在您的代码中，您提到了“ 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> 

Answer 4

这是预览代码解决方案

    <!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>