javascript - JQuery修改print.css文件的CSS类不生效

Question

我的页面有两个不同的打印按钮和两种类型的 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 文件进行打印。正确使用“no-print”类硬编码的 div 不会打印。

但是，“打印部分”按钮的打印输出与打印完整按钮的打印输出完全相同。

当我运行调试器并进入 PrintPartial() 函数时，我可以检查元素，并且“no-print”类将添加到正确的元素中。它调用 window.print() 打开打印对话框，并从存储在 notPartial 变量中的元素中删除“no-print”类。

我唯一的想法是 JQuery select 和 addClass 是异步运行的，并且在类更改之前调用 print ？如果是这样，我如何确保在 addClass 完成之前不会调用 window.print 。

我尝试在不使用removeClass步骤的情况下运行它，并得到了相同的结果，所以我知道这不是我的问题，或者至少不是我唯一的问题。

有人可以告诉我我做错了什么以及如何纠正吗？

谢谢， 斯科特

更新:正如 Pabs123 指出的那样，上面的代码工作正常。我遇到了一个问题，不同的 css 片段(未包含在本文中)导致显示属性改回。

谢谢

Answer 1

抱歉，我在此处发布的代码按预期工作。正如 Pabs123 在他/她的评论中建议的那样，我还有其他冲突的 css 未包含在帖子中，即将显示样式从 display: none 更改回来。因此，正如发布的那样，这并不是一个好问题。抱歉。

感谢您的帮助。