将多个数据传递给bootstrap模式

时间:2015-12-10 18:42:31

标签: javascript jquery bootstrap-modal

我想将多个数据传递给bootstrap模式,是否可以传递?我发现只有一个data(ISBN564541)通过。这是代码

模态HTML

<p>Link 1</p>
<a data-toggle="modal" data-id="ISBN564541" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a>

<div class="modal hide" id="addBookDialog">
 <div class="modal-header">
    <button class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
  </div>
    <div class="modal-body">
        <p>some content</p>
        <input type="text" name="bookId" id="bookId" value=""/>
    </div>
</div>

JS

$(document).on("click", ".open-AddBookDialog", function () {
     var myBookId = $(this).data('id');
     $(".modal-body #bookId").val( myBookId );
});

请回复。

1 个答案:

答案 0 :(得分:0)

您可以将额外数据放在这样的对象中:

var books = {
  'ISBN564541': {
    'title': 'Book 1',
    'pages': 256
  },
  'ABCDEF': {
    'title': 'Book 2',
    'pages': 1024
  }
};

然后在您的点击功能中,您可以使用book id来检索额外数据,以设置任何输入标记的值:

var book = books[myBookId];
$(".modal-body #bookTitle").val( book.title );
$(".modal-body #bookPages").val( book.pages );