Jade:ブートストラップモードで変数を取得します -- javascript フィールド と jquery フィールド と twitter-bootstrap フィールド と express フィールド と pug フィールド 関連 問題

Jade: get variable in Bootstrap Modal












1
vote

問題

日本語

私は以下を達成しようとしています:

マイJadeページでは、 for -loopを使用してアイテムのリストを生成します。このリストの各項目には、いくつかの情報があり、Jade-Variablesを介して表示され、削除ボタンがあります。この削除ボタンはブートストラップモード(ポップアップウィンドウ)を開く必要があります。モーダルにリスト内の対応する項目に関する情報の一部を含めたいのですが。

これは私の翡翠ファイルです:

<事前> <コード> //Modal .modal.fade#delPubModal(tabindex='-1', role='dialog') .modal-dialog .modal-content .modal-header button.close(type='button', data-dismiss='modal') span(aria-hidden='true') span.sr-only | Close h4#delPubLabel.modal-title | Delete //#{pub.title} should go here .modal-body p#modalPubTitle | Are you sure you want to delete //#{pub.title} should go here p | This can not be undone form#delPubForm.form(method='post', action='deletepublication') .modal-footer button#modalDelPub.btn.btn-danger(type='submit', form='delPubForm') | Delete button.btn.btn-succes(type='button', data-dismiss='modal') | Close //List of items ul.media-list - var len = pubObject.length - for(var i = 0; i < len; i++) //Each pub has a title //The title should be passed on to the corresponding Modal - var pub = pubObject[i] .panel.panel-default .panel-body li.media .media-body h4.media-heading#pubTitle | #{pub.title} button#delPub.btn.btn-danger(data-toggle='modal', data-target='#delPubModal') span.glyphicon.glyphicon-trash | Delete

どうすればこれを達成できますか?私はJavaScriptを使ってみようとしていますが、これまでの成功はありません。

これは私のJavaScriptコードです:

<事前> <コード> $(document).ready( function() { $('#delPub').on('click', function() { var title = $(this).closest('h4').text(); $('#delPubLabel').text(title); }); });
英語

I am trying to achieve the following:

My Jade page uses a for-loop to generate a list of items. Each item in this list has some information, displayed via Jade-variables, and a delete-button. This delete button should open a Bootstrap Modal (a pop-up window). I want the Modal to contain some of the information about the corresponding item in the list.

Here is my Jade file:

//Modal .modal.fade#delPubModal(tabindex='-1', role='dialog')         .modal-dialog             .modal-content                 .modal-header                     button.close(type='button', data-dismiss='modal')                         span(aria-hidden='true')                         span.sr-only                             | Close                     h4#delPubLabel.modal-title                             | Delete //#{pub.title} should go here                 .modal-body                     p#modalPubTitle                             | Are you sure you want to delete //#{pub.title} should go here                     p                             | This can not be undone                     form#delPubForm.form(method='post', action='deletepublication')                 .modal-footer                     button#modalDelPub.btn.btn-danger(type='submit', form='delPubForm')                             | Delete                     button.btn.btn-succes(type='button', data-dismiss='modal')                             | Close  //List of items ul.media-list     - var len = pubObject.length     - for(var i = 0; i < len; i++)         //Each pub has a title         //The title should be passed on to the corresponding Modal         - var pub = pubObject[i]             .panel.panel-default                 .panel-body                     li.media                         .media-body                             h4.media-heading#pubTitle                                 | #{pub.title}                             button#delPub.btn.btn-danger(data-toggle='modal', data-target='#delPubModal')                                 span.glyphicon.glyphicon-trash                                 |   Delete 

How can I achieve this? I have been trying using JavaScript, but so far no success.

This is my JavaScript code:

$(document).ready( function() {     $('#delPub').on('click', function() {         var title = $(this).closest('h4').text();         $('#delPubLabel').text(title);     }); }); 
</div
              
     
     

回答リスト

0
 
vote
vote
ベストアンサー
 

次のJavaScriptコードを使用して解決しました。

<事前> <コード> $(document).ready( function() { $('#delPub').on('click', function() { var title = $('#delPub').parent().find('h4').text(); $('#delPubLabel').append(document.createTextNode(title)); }); });
 

I solved it by using the following JavaScript code:

$(document).ready( function() {     $('#delPub').on('click', function() {         var title = $('#delPub').parent().find('h4').text();         $('#delPubLabel').append(document.createTextNode(title));     }); });     
</div
 
 
 
 

関連する質問

2  動的コンテンツを使用してページをロードします  ( Loading pages with dynamic content ) 
Bukkitを使用するいくつかのMinecraftサーバーのためのプロジェクトに取り組んできました。サーバーの世界の動的マップを含むWebページ、およびリアルタイムのイベントアップデートシステム、およびサーバー上でイベントが発生するにつれて更新されるリアルタ...

4  PUGテンプレートを使用する場合は、予期しないトークン「インデント」  ( Unexpected token indent when using pug templates ) 
私は小さいコンテンツを出力する必要がある単純なアプリケーションを持っています。 nodejs、ExpressとPug を使用します。 <事前> <コード> ballbutton.imageview3 と私のPUGファイル/ HTML <事前> <コード>...

0  jadeの<%=とは何ですか?  ( What is in jade ) 
私はそのビューエンジンにHTMLを使用するチュートリアルを経験しています、私はJadeに取り組んでいて、ちょうどこれが翡翠のページになるのか知りたいのです。 <事前> <コード> 'fruit'1 私はこれを試してみましたが、Usertemplate IDが...

20  翡翠なしの発電機  ( Express generator without jade ) 
Express Generatorを使用してExpress Skeletonを生成しようとしています。 だからこれはこれになるでしょう: <事前> <コード> $ npm install express-generator -g しかし、自動翡翠ファイル...

0  DIVタグを入力ボックスに回します  ( Turn a div tag into a input box ) 
.editable divのH2をCKICKICKICATIONで、入力ボックスに変更する必要があります。その後、それを編集することができ、それをクリックすると入力を更新するか、Enterキーを押します。これは私がそれのために持っているものです、私は立ち往生...

1  コレクションとビューはバックボーンスクリプトで動作していませんか?  ( Collection and view not working in backbone script ) 
ねえ、私は現在チュートリアルとバックボーンを学んだりしていますが、何らかの理由で仕事をするためにバックボーンモデル以外にも何も入手できません。コレクションやビューなど、その下のすべてがコンソールに物事を入力するときに応答しないようです。これは現在私のコードです...

2  pugjs - テンプレートファイルが見つかりません/ディレクトリは無視されます  ( Pugjs template file not found directory ignored ) 
私は小さいコンテンツを出力する必要がある単純なアプリケーションを持っています。 nodejs、ExpressとPug を使用します。 <事前> <コード> const pug = require('pug'); const express = require...

0  誰もがブランチで働く翡翠のテンプレート言語を持っていますか?  ( Does anyone have jade template language working in brunch ) 
誰もがブランチを扱う翡翠テンプレットを手に入れましたか?もしそうならどのように? ...

0  ng-optionsを使用しているときに選択に最初のオプションのみが表示されるのはなぜですか?  ( Why does only the first option appear in select when using ng options ) 
NG-Repeatを使用して入力されている選択をしていて、選択の下に2つのオプションを作成する場合は、最初に表示されます。なぜこれは?です 例: <事前> <コード> <select id="dropDownSelect", ng-model="chosen...

0  jade.escapeを呼び出すと、Jade.compileClientは失敗します  ( Jade compileclient fails when invoking jade escape ) 
jade.compileClient を使用して、JADEファイルをJS関数に変換し、エスケープされたHTMLを使用するときに問題があります。 Jade In In Write: <事前> <コード> h2= conditional ? 'String1...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有