Простой jQuery show modal и печать функции печати при выборе 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, чтобы он работал.