如何使用JQuery以编程方式翻转元素属性的值？

Question

我刚刚开始进入JQuery,所以如果这是一个简单的问题,我会提前道歉.

我正在使用关于打印预览的A List Apart文章尝试在我正在处理的webapp中获取实时打印预览.我已经让它工作得令人满意,但我现在正在尝试将我的代码重构为我认为应该在内部看起来的内容.我目前有两套方法,一套用于显示微观块,另一套用于移除它.我宁愿只有一个单元来切换相关元素的适当值.

对于CSS,这意味着禁用非打印预览图纸并启用打印预览图纸,反之亦然.对于我的显微术,这意味着设置display到block,而不是none再次反之亦然.

至少对于样式表链接,我想简单地遍历相关link元素的集合并设置disabled为!disabled但我无法弄清楚如何做到这一点.我正在使用jQuery,但我并不反对低于这个抽象级别.

我假设一旦我知道如何为link元素做到这一点我应该能够扩展解决方案以切换display微观div 的属性.

这是我目前的好奇功能:

function printPreview() {
    $("link[rel*='style'][media!='print'").attr("disabled", true);
    $("link[rel*='style'][title='print preview']").attr("disabled", false);
    addPrintPreviewMicrocopy();
}

function addPrintPreviewMicrocopy() {
    $("div[id='print-preview-microcopy']").css({'display':'block'});
}

function normalView() {
    $("link[rel*='style'][media!='print'").attr("disabled", false);
    $("link[rel*='style'][title='print preview']").attr("disabled", true);
    removePrintPreviewMicrocopy();
}

function removePrintPreviewMicrocopy() {
    $("div[id='print-preview-microcopy']").css({'display':'none'});
}

提前致谢!

---

感谢大家.这是我的最终解决方案:

function toggleView() {
    $("link[rel*='style'][media!='print']").each( function() {
        this.disabled = !this.disabled;
    });
}

事实证明,我甚至不需要切换div,因为单独的样式表就是这样做的.

Answer 1

您可以使用以下toggle功能切换显示/隐藏:

function removePrintPreviewMicrocopy() {
    $("div[id='print-preview-microcopy']").toggle();
}