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

我刚开始进入JQuery，所以如果这是一个简单的问题，我提前道歉。如何以编程方式使用JQuery翻转元素属性的值？

我正在与A List Apart article on Print Previews一起尝试在我正在处理的webapp中获得实时打印预览。我已经得到了令人满意的工作，但我现在试图将我的代码重构为我认为应该看起来像内部的东西。我目前有两套方法，一种用于显示显微镜块，另一种用于去除它。我宁愿只有一组切换正在讨论的元素的适当值。

对于意味着禁用非打印预览页并启用打印预览页的CSS，反之亦然。对于我的显微镜来说，这意味着将display设置为block而不是none，反之亦然。

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

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

这是我目前的职能为好奇：

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作为单独的样式表做到这一点。

来源

2009-12-15 Tim Visher

为<link>元素，你可以切换他们disabled属性。

至于divs，你可以使用其他人建议的toggle()。

来源

2009-12-15 16:07:26

您可以切换显示/隐藏与toggle功能：

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

来源

2009-12-15 16:01:32

谢谢！这适用于显微镜div。我的代码最终是'$（“＃print-preview-microcopy”）。toggle（）'。 – 2009-12-15 16:23:35

的disabled HTML属性是不是技术上的布尔值。它是一个具有“”或“禁用”值的枚举类型。

该disabled DOM属性，但是，是一个布尔值。

$('selector').attr("disabled", ""); 
$('selector').each(function() { this.disabled = false; });

而且，你的ID选择过于复杂

$("div[id='print-preview-microcopy']")

应该

$("#print-preview-microcopy")

来源

2009-12-15 16:05:00

感谢您的回复。原谅我，如果我失去了一些东西，但我不能告诉你的代码如何让我切换所有选定元素禁用的值。我不只是想关闭它，我想从关闭到开启，等等。感谢您的进一步解释。 – 2009-12-15 16:25:05

罗丹·马斯的答案显示了如何。我只是在区分HTML属性和DOM属性 – 2009-12-15 16:34:42

Gotcha。说得通。 – 2009-12-15 19:38:34

另一种方法是使用show（）和隐藏（）方法。

$("#selector").show(); 
$("#selector").hide();

或者你可以使用一个很好的淡入淡出，如果你喜欢。

$("#selector").fadeIn("slow"); 
$("#selector").fadeOut("slow");

应该注意的是，“#selector”应该与div id或html标签相关。

$('link[rel*=style]').each(function(){ 
    this.disabled = !this.disabled 
})

这工作，因为该属性具体为读/写boolean属性<link>元素：

来源

2009-12-15 16:06:44

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

回答

相关问题