具有单个属性的引导模式

Question

我想将一个引导模式用于多个功能，应通过单击按钮/链接动态加载这些功能（参见示例）。 由于某种原因，属性（data-mTitle 和 data-mParams）不会加载。具有标准属性 像 href、id、class 等。它完美无缺。

正如我所说，我只想将一个 Modal (HTML) 和一个 JS 函数用于所有目的（作为通用解决方案）。知道我做错了什么吗？

$(document).ready(function(){
  
  $('#myModal').on('shown.bs.modal', function () {
    	  
        var $modal = $(this),
		modal_title = $(this).data('modal-title'),
		modal_params = $(this).data('modal-params');

        if(typeof modal_title !== typeof undefined && modal_title !== false) {
            title = modal_title;
        }
        else{
            title = 'My Title';
            }

        $.ajax({
            cache: false,
            type: 'POST',
            url: '/ajax.php',
            data: modal_params,
            success: function(data) {
                $modal.find('.modal-title').html(title);
                $modal.find('.modal-body').html(data);
            }
        });
    });
  
  });

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<a href="" data-toggle="modal" data-target="#myModal" data-modal-title="abcd Title" data-modal-params="a=b">Link 1</a>
<a href="" data-toggle="modal" data-target="#myModal" data-modal-title="efgh Title" data-modal-params="c=d">Link 2</a>

<div class="modal hide fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Loading title...</h4>
</div>
<div class="modal-body">
Loading content...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Answer 1

属性名称中只能使用小写字母。

你可以在this answer找到原因。

基本上，当你写的时候：

$(this).attr('data-mTitle')

jQuery 正在寻找这个：

<a data-m-title="Title"></a>

顺便说一句，即使在这里使用.attr() 没有任何问题，但您应该使用专门用于处理数据属性的.data()。