Modifier l'ID de l'élément avec Javascript, si ... else if ... else

J'essaie de créer un argument if ... else if ... else où la seule variable est le numéro actuel du niveau d'accès. Cela déterminera le contenu à afficher pour l'utilisateur, de sorte que quelqu'un avec le niveau 1 verra une chose tandis que quelqu'un avec le niveau 0 en verra une autre.Modifier l'ID de l'élément avec Javascript, si ... else if ... else

Par défaut tout est caché, mais une fois que quelqu'un va sur la page web, le Javascript est supposé changer l'ID de l'élément pour afficher le contenu approprié. Je ne suis pas sûr de ce que je fais mal, mais ça ne change pas l'ID comme il se doit. Si je vais à ce sujet dans le mauvais sens s'il vous plaît laissez-moi savoir quelles autres alternatives il peut y avoir.

<html> 
<body> 


<style type="text/css"> 
#AccessLevel1Hide {display: none; } 
#AccessLevel1Show {display: block; } 
#AccessLevel0Hide {display: none; } 
#AccessLevel0Show {display: block; } 
</style> 


<script type="text/javascript"> 
var AccessLevel = (1); 

if (AccessLevel == 1){ 
    document.getElementById('AccessLevel1Hide').id="AccessLevel1Show"; 
}else if (AccessLevel == 0){ 
    document.getElementById('AccessLevel0Hide').id="AccessLevel0Show"; 
}else {document.write("ERROR"); 
} 
</script> 


<div id="AccessLevel1Hide"> 
Access Level 1 message. 
</div> 

<div id="AccessLevel0Hide"> 
Access Level 0 message. 
</div> 


</body> 
</html>

Source

2010-09-10 Edvard D

Lorsque vous modifiez AccessLevel1Hide à AccessLevel0Hide la deuxième getElementById va chercher la première div (pour lequel vous avez modifié l'ID dans la première étape.)

Donc ce que vous devez faire, est de changer AccessLevel1Hide Pour indiquer AccessLevelTempHide, remplacez AccessLevel0Hide par AccessLevel1Hide et remplacez AccessLevelTempHide par AccessLevel0Hide.

Je vous suggère d'utiliser des classes CSS, plutôt que de changer les identifiants.

Source

2010-09-10 00:35:46 Rahul

beaucoup plus facile d'utiliser une classe, comme ceci:

voir http://jsfiddle.net/hJ6gd/8/

<html> 
<body> 


<style type="text/css"> 
.hide {display: none; } 
.show {display: block; } 
</style> 


<script type="text/javascript"> 
var AccessLevel = (1); 

if (AccessLevel == 1){ 
    document.getElementById('AccessLevel1').setAttribute("class", "show"); 
}else if (AccessLevel == 0){ 
    document.getElementById('AccessLevel0').setAttribute("class", "show"); 
}else {document.write("ERROR"); 
} 
</script> 


<div id="AccessLevel1" class="hide"> 
Access Level 1 message. 
</div> 

<div id="AccessLevel0" class="hide"> 
Access Level 0 message. 
</div> 


</body> 
</html>

Cependant, il convient de noter ce n'est pas du tout sécurisé - tout ce qu'ils ont à faire est de voir la source de tout voir.

Source

2010-09-10 00:36:33 Hogan

Merci beaucoup, est beaucoup plus logique que la façon dont je tentais de le faire! Je voudrais noter qu'en ajoutant la classe "hide" cela ne fonctionnait pas, ce que j'ai fait était de supprimer complètement la classe hide et d'utiliser à la place # AccessLevel1 {display: none; } pour le cacher. J'ai ensuite utilisé # AccessLevel1 .show {display: block; } pour l'afficher. Il y a d'autres systèmes en place pour sécuriser la page; ce code est juste utilisé pour afficher les liens auxquels ils ne pourront pas accéder s'ils n'ont pas le niveau de toute façon. Merci d'avoir soulevé si! –

EDIT: Je pensais que cela fonctionnait, mais après un peu plus de tests, j'ai trouvé que ce n'était pas le cas. Lorsque je modifie le AccessLevel à 2, il affiche ERROR comme il se doit. Lorsque je le change en 1 ou 0, il n'affiche rien. L'option .document.write fonctionne parfaitement, mais pour une raison quelconque, les autres arguments que j'essaie d'utiliser (comme ci-dessus) ne fonctionnent pas avec if ... else if ... else. Y a-t-il un pas secret qui me manque? –

Edvard: Je devrais voir le code - modifier mon jsfiddle et je peux le regarder. – Hogan

Je crois qu'une meilleure approche serait de laisser l'ID statique et d'ajouter une classe qui change. Ou, alternativement, vous pouvez simplement changer le .style.display de chaque élément, plutôt que l'id.

Source

2010-09-10 00:37:24 Robert

C'était la première chose que j'essayais mais ça ne fonctionnait pas non plus. Pour une raison quelconque, tout ce que j'ai essayé sauf .document.write ne fonctionne pas. Je pourrais finir par devoir l'utiliser. –

Je n'ai jamais essayé de changer un identifiant d'élément auparavant, je ne suis pas sûr que ce soit logique. Vous devriez le faire avec des classes, pas des ID, donc votre CSS est .AccessLevel1Hide etc et changer les classes.

Mais le vrai problème est de faire confiance au client/navigateur. Je peux modifier mon niveau d'accès de manière triviale, ou simplement afficher la source de la page et voir tout pour chaque niveau d'accès.

Ces contrôles doivent être effectués côté serveur, et uniquement le contenu approprié doit être remis au navigateur.

Source

2010-09-10 00:38:25

Je ne vais pas afficher d'informations sensibles avec cela. J'essaie de créer un script pour une plate-forme spécifique qui ne donne pas aux utilisateurs l'accès au code source, il est donc difficile d'ajouter n'importe quel type de fonctionnalité "avancée". En fin de compte, il sera probablement utilisé pour afficher différents liens/options en fonction de AccessLevel, donc s'ils cliquent dessus, ils ne pourront toujours pas y accéder car le système principal les gardera à l'écart. –

Je pense que vous devez utiliser la propriété style.display

if (AccessLevel == 1){ 
    document.getElementById('AccessLevel1Hide').style.display = "block"; 
    document.getElementById('AccessLevel0Hide').style.display = "none"; 

}else if (AccessLevel == 0){ 
    document.getElementById('AccessLevel1Hide').style.display = "none"; 
    document.getElementById('AccessLevel0Hide').style.display = "block"; 

}else {document.write("ERROR"); 
}

Source

2010-09-10 00:41:27 unigg

Modifier l'ID de l'élément avec Javascript, si ... else if ... else

Répondre

Questions connexes