2

Twitter ブートストラップを使用して単純なモーダルを作成しようとしています。そのモーダルの機能は、クリックされたリンクの名前を取得し、その名前をヘッダーとして使用することです。それぞれの名前は Django データベースにあります。参照用にこのリンクをたどりました: Passing data to a bootstrap modal

#Button to toggle modal
<a data-toggle="modal" data-id="{{ name }}" title="Add this item" class="open-  AddBookDialog " href="#addBookDialog">{{ name }}</a><br />

#Modal
<div class="modal hide fade" id="addBookDialog">
     <div class="modal-header">
        <button class="close" data-dismiss="modal">×</button>

     </div>
     <div class="modal-body">
         <input type="text" name="nameId" id="nameId" />
         <p>some content</p>

     </div>
</div>

#JavaScript
 <script type="text/javascript">
$(document).on("click", ".open-AddBookDialog", function () {
    var myNameId = $(this).data('id');
    $("modal-body #nameId").val( myNameId );

    });
</script>

上記が行うことは、ボックス内に文字名を含むテキスト ボックスを表示することです。私が望むのは、テキストボックスではなく、ヘッダーとして名前を付けることです。テキスト ボックスを削除し、同じ ID と名前のヘッダー タグを配置すると、何も表示されません。このタスクを完了する方法はありますか。

4

3 に答える 3

2

ワンオフの方法

サイト/アプリで UI バインディングの動作を行う必要があるのがこれだけの場合は、次のようにします。

$('.header-link').click(function(e) {
   $('.modal-header h4').html($(e.target).html())
})

CodePen デモ

これは、リンク自体のテキスト (実際には HTML) を取得し、それをヘッダーに配置するだけです。

ライブラリの使用

アプリのより多くの部分でこの種のクールなトリックを実行する予定がある場合は、Angular JS や Knockout などの UI バインディング ライブラリの使用を検討してください。このようdata-bindにして、UI の一部にイベントを含めることができます。

于 2013-07-22T13:40:33.360 に答える
2

私は答えを見つけました。レイアウトを提供してくれた @PaoloCasciello に感謝します。

JavaScriptの関数の代わりに、.on実際には.html. したがって、最終的なコードは次のようになります。

<!-- Modal -->
<div class="modal hide fade" id="addBookDialog">
     <div class="modal-header">
         <button class="close" data-dismiss="modal">×</button>
         <h3 id="nameId" />

      </div>
      <div class="modal-body">
         <p>some content</p>
      </div>
 </div>


<script type="text/javascript">
$(document).on("click", ".open-AddBookDialog", function () {
 var myNameId = $(this).data('id');
 var myNameDescription = $(this).data('description');
 $(".modal-header #nameId").html( myNameId );
于 2013-07-22T13:45:19.283 に答える