DIVを選択しながら、Modal Show Modalを表示し、印刷機能を印刷する

StackOverflow https://stackoverflow.com//questions/21053590

  •  22-12-2019
  •  | 
  •  

質問

だから私は3つの容器を持っています。モーダルを開く印刷ボタンがあります。そのモーダルでは、jQueryを使用して、モーダルの本文にDIV(つまりページ上に追加)を追加しています。モーダルの内側には、画像だけを印刷する印刷ボタンがあります。ここでは例を見ることができます。 http://schomphondaoffers.com/test1 。現在印刷をクリックしたとき、それは上記の特別なボタンなしでモーダルをポップします。私はすべてのモジュールで表示されている2番目の画像でさまざまな結果が得られ、最初のものだけがボタンを削除しています。

すべてがうまくいっているようです。たった一つで。私はそれを3回使用するためにこのコードのビットを複製しようとしました(私は2つの列に2つずつ置き換えました)。私はjQueryに新しく、これを書くのははるかに簡単な方法があることを知っています。私はあらゆる助けに感謝します。

jQuery(document).ready(function( $ ) {

$('#sales-one').appendTo("body").modal('hide');

$('#print-one').click(function(){
    $('.special-one').printElement();
});

$(function(){
    var oldDiv= $('.special-one').html();
    $('.modal-body').html(oldDiv);  
});

$(function(){
    $('#sales-one').click();
    $('.modal-body').eq(0) //use 1 if you want to remove from second section
    .find('#special-one-button').remove();
});

});

jQuery(document).ready(function( $ ) {

$('#sales-two').appendTo("body").modal('hide');

$('#print-two').click(function(){
    $('.special-two').printElement();
});

$(function(){
    var oldDiv= $('.special-two').html();
    $('.modal-body').html(oldDiv);  
});

$(function(){
    $('#sales-two').click();
    $('.modal-body').eq(0) //use 1 if you want to remove from second section
    .find('#special-two-button').remove();
});

});

jQuery(document).ready(function( $ ) {

$('#sales-three').appendTo("body").modal('hide');

$('#print-three').click(function(){
    $('.special-three').printElement();
});

$(function(){
    var oldDiv= $('.special-three').html();
    $('.modal-body').html(oldDiv);  
});

$(function(){
    $('#sales-three').click();
    $('.modal-body').eq(0) //use 1 if you want to remove from second section
    .find('#special-three-button').remove();
});

});
.

役に立ちましたか?

解決

jQuery

jQuery(document).ready(function( $ ) {
  $('.btw').click(function(){
    $('.modal-body').html($('.'+$(this).data('class')).html());
    $('.modal-body [id$=-button]').remove();
  });       
});
.

HTML

<button href="#sales-one" data-class="special-one" class="btw" data-toggle="modal">Print</button>
<button href="#sales-two" data-class="special-two" class="btw" data-toggle="modal">Print</button>
<button href="#sales-three" data-class="special-three" class="btw" data-toggle="modal">Print</button>
.

これは、うまくいけば助けになる例です。

http://www.bootply.com/104889

HTMLをリファクタリングしすぎていませんが、3つのモジュールを使用していることに気付きました。しかし、私はあなたがあなたの質問で共有しているコードを再因数調整し、それがうまくいくようにHTMLを修正したばかりで働いていました。

ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top