2

我刚刚开始接触 JQuery，所以如果这是一个简单的问题，我提前道歉。

我正在处理有关打印预览的 A List Apart 文章，以尝试在我正在处理的 web 应用程序中获取实时打印预览。我已经让它令人满意地工作，但我现在正试图将我的代码重构为我认为它应该在内部看起来的样子。我目前有两组方法，一组用于显示微拷贝块，另一组用于删除它。我宁愿只有一个集合来切换相关元素的适当值。

对于 CSS，这意味着禁用非打印预览表并启用打印预览表，反之亦然。对于我的 microcopy，这意味着设置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，因为仅样式表就可以做到这一点。

4

4 回答 4

5

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

function removePrintPreviewMicrocopy() {
    $("div[id='print-preview-microcopy']").toggle();
}
于 2009-12-15T16:01:32.583 回答
3

HTML 属性在disabled技术上不是布尔值。它是一个值为“”或“禁用”的可枚举。

然而disabled，DOM 属性是一个布尔值。

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

另外，您的 ID 选择器太复杂了

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

应该

$("#print-preview-microcopy")
于 2009-12-15T16:05:00.373 回答
3

对于<link>元素，您可以使用以下方式切换其disabled属性：

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

这是有效的，因为该属性特别是元素的读/写boolean属性<link>。

至于您可以toggle()按照其他人的建议使用的 div。

于 2009-12-15T16:07:26.113 回答
1

另一种选择是使用 show() 和 hide() 方法。

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

或者，如果您愿意，也可以使用漂亮的淡入淡出。

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

应该注意的是，“#selector”应该与有问题的 div id 或 html 标记相对应。

于 2009-12-15T16:06:44.800 回答