Comment est-ce que je peux retourner par programme la valeur d'un attribut d'élément en utilisant JQuery?

Question

Je commence juste à entrer dans JQuery alors je m'excuse à l'avance si c'est une question simple.

Je travaille avec le A List Apart article on Print Previews pour essayer d'obtenir des aperçus d'impression en direct dans la webapp sur laquelle je travaille. Je l'ai fait fonctionner de manière satisfaisante mais j'essaye maintenant de refactoriser mon code à ce que je pense qu'il devrait ressembler intérieurement. J'ai actuellement 2 ensembles de méthodes, une pour afficher le bloc de microcopie et l'autre pour l'enlever. Je préfèrerais juste avoir un seul ensemble qui permute les valeurs appropriées des éléments en question.

Pour CSS, cela signifie désactiver les feuilles de prévisualisation non imprimables et activer la prévisualisation d'impression, et inversement. Pour ma microcopie, cela signifie que le réglage display à block plutôt que none, encore une fois vice-versa.

Au moins pour les liens de feuille de style, je veux simplement boucle à travers la collection d'éléments connexes link et mis disabled-!disabled mais je ne peux pas comprendre comment faire. J'utilise jQuery mais je ne suis pas opposé à tomber en dessous de ce niveau d'abstraction.

Je suppose qu'une fois que je sais comment faire cela pour les éléments link, je devrais être en mesure d'étendre la solution pour également basculer l'attribut display de la division microcopy.

Voilà mes fonctions actuelles pour les curieux:

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

Merci à l'avance!

---

Merci à tous. Voici ma solution finale:

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

Il se trouve que je ne même pas besoin de passer la div comme les stylsheets seul fait que.

Answer 1

Pour <link> éléments, vous pouvez basculer leur attribut disabled avec:

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

Cela fonctionne parce que cet attribut est spécifiquement une lecture/écriture boolean propriété pour <link> éléments. En ce qui concerne les divs, vous pouvez utiliser toggle(), comme d'autres suggérés.

Answer 2

Vous pouvez basculer afficher/cacher la fonction toggle:

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

Answer 3

Le disabled attribut HTML est pas techniquement booléenne. C'est un énumérable avec une valeur de "" ou "désactivé".

La propriété disabled DOM, cependant, est un booléen.

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

En outre, vos sélecteurs d'identification sont trop compliquées

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

devrait être

$("#print-preview-microcopy") 

Answer 4

Une autre option consiste à utiliser le spectacle() et hide().

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

Ou vous pourriez utiliser un joli fondu si vous préférez.

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

Il convient de noter que "#selector" devrait être relpaced avec le div id ou la balise html en question.