Come posso programmazione capovolgere il valore di un attributo elemento utilizzando jQuery?

Question

Sto solo cominciando a entrare in JQuery quindi mi scuso in anticipo se questa è una domanda semplice.

sto lavorando con la A List Apart articolo su anteprime di stampa per cercare di ricevere in anteprima di stampa dal vivo nel webapp che sto lavorando su. Ho ottenuto di lavorare in modo soddisfacente, ma ora sto cercando di refactoring il mio codice di quello che penso che dovrebbe essere simile internamente. Al momento ho 2 set di metodi, uno per la visualizzazione del blocco di microcopy e l'altro per la rimozione. Preferirei mille volte resta che un unico set che alterna i valori appropriati degli elementi in questione.

Per il CSS che significa disabilitando i fogli non stampa anteprima e consentendo una anteprima di stampa, e viceversa. Per il mio microcopy, che significa impostare display a block anziché none, nuovamente viceversa.

Almeno per i collegamenti fogli di stile, voglio semplicemente scorrere la raccolta di elementi link correlate e impostare disabled per !disabled ma non riesco a capire come farlo. Sto utilizzando jQuery ma io non sono contrario a cadere sotto di tale livello di astrazione.

presumo, una volta che so come fare per gli elementi link dovrei essere in grado di estendere la soluzione per attivare anche l'attributo display del div microcopy.

Ecco le mie attuali funzioni per i curiosi:

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

Grazie in anticipo!

---

Grazie a tutti. Ecco la mia soluzione finale:

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

Si scopre che non ho nemmeno bisogno di attivare il div come stylsheets solo fatto che.

Answer 1

Per gli elementi <link> è possibile passare loro attributo disabled con:

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

Questo funziona perché questo attributo è specificamente una proprietà boolean di lettura / scrittura per gli elementi <link>.

Per quanto riguarda il div è possibile utilizzare toggle() come altri hanno suggerito.

Answer 2

È possibile passare mostra / nascondi con la funzione toggle:

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

Answer 3

L'attributo disabled HTML non è tecnicamente booleano. E 'un enumerabile con un valore di "" o "disabile".

La proprietà DOM disabled, tuttavia, è un valore booleano.

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

Inoltre, i vostri selettori ID sono troppo complicate

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

dovrebbe essere

$("#print-preview-microcopy")

Answer 4

Un'altra opzione è quella di utilizzare la show () e hide () metodi.

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

Oppure si potrebbe usare una bella dissolvenza, se si preferisce.

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

Si deve notare che "#selector" dovrebbe essere relpaced con l'id div o il tag html in questione.