Jquery在点击链接上将数据属性传递给模态

Question

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

HTML sn-p 如下：

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

模态sn-p如下：

<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

为了设置数据不要使用驼峰表示法。 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-* 属性由两部分组成：

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

Answer 2

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

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

Answer 3

请检查下面的sn-p。您将正确找到用户名。在您的代码中，您提到了“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

这里是预览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>