简单jQuery显示模式并在选择div时打印打印函数

所以我有三个容器。我有一个打印按钮，可以打开一个模式。在该模式中，我使用jQuery将div（位于页面上）添加到该模式的主体中。在模式中，我有一个打印按钮，只打印图像。您可以在此处看到一个示例：。当前，当您单击“打印”时，它将弹出模式，而不显示上面带有特殊标记的按钮。我得到了各种各样的结果，第二个图像显示在所有的模态中，只有第一个图像删除了按钮

一切似乎都很好。只有一个。我试图复制这段代码，使用了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();
});

});

jQuery

HTML

打印
打印
打印

这里有一个例子，希望能有所帮助

---

我没有过多地研究如何重构html，但我注意到您使用了三种模式。。你可以把这个因素降下来，这样你就可以只用一个而不是三个。但我只是对你在问题中共享的代码进行了重新分解，并对html进行了一些修改，使其能够正常工作。

你能创建一个

http://www.bootply.com/

演示您的问题？这将帮助我为你想出一个解决方案。我做了，但它是一个wordpress网站，因此图像URL在其中不起作用：是一个工作页面（真的是一样的）@user3180166如果它回答了你的问题，请将此答案标记为已接受。（答案左边有一个复选标记，你可以勾选）太棒了，谢谢！我只考虑使用一种模式。这实际上与您编写按钮移除的方式有关。关于您编写的这一行，我还有一个问题：$（'.modal body[id$=-button]'）.remove（）；[id$=-按钮]是什么语法？我还没碰到过。我试图把它说出来，我的逻辑告诉我是一系列的按钮。我不确定id$=-部分tho。再次感谢您的支持help@user3180166是的，基本上这是一个通配符选择器，

[id$=-button]

基本上选择所有以

-button

结尾的元素。谢谢你的推荐。我想是这样的。一切都开始有意义了：）

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

<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>