简单的jquery显示模态并在选择div时打印打印功能

Question

所以我有三个容器。我有一个打印按钮，打开模态。在那个模态中，我正在使用jQuery添加一个div（页面上的页面）到模态的正文。在模态内，我有一个打印按钮，即仅打印图像。您可以在这里看到一个示例： http://schomphondaoffers.com/test1 。目前，当您单击“打印”时，它应该弹出模态，而无需上方的特殊按钮。在所有模态中显示第二个图像，我会获得变化的结果，并且只有第一个删除按钮。

一切似乎都很好。只有一个。我试图复制这一点代码，用它3次（我刚用两个和三个替换为另一列的一个）。我是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();
});

});

.

Answer 1

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太多，但我注意到你使用三个模块..你可以根据你的唯一使用一个而不是三个模块。但我刚刚重新考虑了你在问题中分享的代码并修改了HTML一点，所以它会起作用。