JQuery Изменение класса CSS для файла print.css не вступает в силу

У меня есть страница с двумя разными кнопками печати и двумя типами тегов div:

<button onclick="window.print()">Print Full</button>
<button onclick="PrintPartial()">Print Partial</button>

<div class="not-partial">
    Div Content Here should print for "Print Full" but not for "Print Partial" 
</div>

<div class="no-print">
    This content shouldn't print on either
<div>

У меня есть следующее в моем файле print.css

.no-print { display: none; }

И ниже моя функция PrintPartial()

function PrintPartial() {
    var notPartial = $(".not-partial");
    notPartial.addClass("no-print");
    window.print();
    notPartial.removeClass("no-print");
}

Кнопка «Печать полностью» работает нормально и печатает в соответствии с моим файлом print.css. Div, который жестко запрограммирован с классом «no-print», правильно не печатается.

Однако распечатка кнопки «Частичная печать» точно такая же, как и кнопка «Печать полностью».

Когда я запускаю свой отладчик и вхожу в свою функцию PrintPartial(), я могу проверять элементы, и класс «без печати» добавляется к правильным элементам. Он вызывает window.print(), который открывает диалоговое окно печати и удаляет класс «без печати» из элементов, хранящихся в переменной notPartial.

Моя единственная мысль: выбор JQuery и addClass выполняются асинхронно, а его вызов print до того, как класс изменился? Если да, то как мне убедиться, что window.print не вызывается до тех пор, пока addClass не будет завершен.

Я попытался запустить его без шага removeClass и получил те же результаты, поэтому я знаю, что это не моя проблема, или, по крайней мере, это не моя ЕДИНСТВЕННАЯ проблема.

Может кто-нибудь, пожалуйста, скажите мне, что я делаю неправильно и как это исправить?

Спасибо, Скотт

ОБНОВЛЕНИЕ: приведенный выше код отлично работает, как указал Pabs123. У меня возникла проблема, когда другой фрагмент css (не включенный в этот пост) вызывает обратное изменение свойства отображения.

Спасибо


javascript html jquery css print-css
person Newey    schedule 13.01.2017    source источник
comment
выглядит нормально codepen.io/pabs123/pen/YNWEyO единственное, о чем я могу думать, это то, что другой css действует на этот элемент или есть какой-то другой внешний css, который здесь не отображается   -  person Pabs123    schedule 13.01.2017
comment
Да, вы правы, я только что понял, что на моей странице есть еще один фрагмент CSS, который переопределяет display:none. Спасибо за помощь.   -  person Newey    schedule 13.01.2017

Ответы (1)


arrow_upward
0
arrow_downward

Извините, код, который я разместил здесь, работает по назначению. Как предположил Pabs123 в своем комментарии, у меня были другие конфликтующие css, которые не были включены в сообщение, которые меняли стиль отображения обратно с display: none. Итак, как было опубликовано, это был не очень хороший вопрос. Извиняюсь.

Спасибо за вашу помощь.

person Newey    schedule 13.01.2017