Question

I m just starting to get into JQuery so I apologize in advance if this is a simple question.

I m working with the A List Apart article on Print Previews to try to get live Print Previews in the webapp that I m working on. I ve gotten it to work satisfactorily but I m now trying to refactor my code to what I think it should look like internally. I currently have 2 sets of methods, one for displaying the block of microcopy and the other for removing it. I d much rather just have a single set that toggles the appropriate values of the elements in question.

For the CSS that means disabling the non-print-preview sheets and enabling the print-preview one, and vice-versa. For my microcopy, that means setting display to block rather than none, again vice-versa.

At least for the the stylesheet links, I want to simply loop through the collection of related link elements and set disabled to !disabled but I can t figure out how to do that. I m using jQuery but I m not opposed to dropping below that level of abstraction.

I assume once I know how to do that for the link elements I should be able to extend the solution to also toggle the display attribute of the microcopy div.

Here s my current functions for the curious:

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 });
}

Thanks in advance!

Thanks everyone. Here s my final solution:

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

It turns out that I didn t even need to toggle the div as the stylsheets alone did that.

Answer 1

For <link> elements you can toggle their disabled attribute with:

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

This works because that attribute specifically is a read/write boolean property for <link> elements.

As for the divs you can use toggle() as others suggested.

Answer 2

You can toggle show/hide with the toggle function:

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

Answer 3

The disabled HTML attribute is not technically boolean. It s an enumerable with either a value of "" or "disabled".

The disabled DOM property, however, is a boolean.

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

Also, your ID selectors are too complicated

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

should be

$("#print-preview-microcopy")

Answer 4

Another option is to use the show() and hide() methods.

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

Or you could use a nice fade if you prefer.

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

It should be noted that "#selector" should be relpaced with the div id or the html tag in question.

友情链接