3
votes

Définir la visibilité DIV à partir d'une variable PHP

Je souhaite afficher et masquer un div basé sur une condition. Cette fois, je n'utilise aucune fonction car je pensais que ce serait mieux aussi simple que possible.

J'essaie d'afficher et de masquer 2 DIV en fonction d'un "statut" de l'utilisateur ( $ new ). Je ne sais pas s'il est possible d'attribuer une valeur PHP à une variable JavaScript et la meilleure façon de le faire ...

"var" est censé obtenir la valeur de "$ new".

Javascript:

<center>
  <div id="subjectr" value="<?php echo "$new"?>" style="display: none">
    <a href="" id="ifYes" style="background-color: green; border: 2px solid #44db2c; display: none;" method=POST; class="btn btn-info">COORDINADOR</a>
  </div> 
</center>

HTML:

<script> 
var var = $new;      
if (var != 1) {
  document.getElementById("subjectr").style.display = "block";
} else {
  document.getElementById("subjectr").style.display = "none";
}
</script>

Si vous connaissez une meilleure façon de le faire , J'apprécierais votre aide.

php javascript html css

2 commentaires

La balise

est obsolète

Javascript n'aimera pas que votre var soit appelée "var". Changez-le en "myvar" ou quelque chose comme ça.

5 Réponses :

-1
votes

Une variable javascript peut obtenir la valeur d'une variable PHP comme ceci (en supposant que la variable PHP est un entier):

var myvar = <?=$new?>;

0 commentaires

1
votes

Au lieu d'utiliser javascript, vous pouvez utiliser PHP pour influencer le style d'affichage de votre div en utilisant un ternaire pour décider s'il s'agit de aucun ou de bloc :

<center>
  <div id="subjectr" value="<?=$new?>" style="display: <?=$new != 1 ? 'block' : 'none'?>">
    <a href="" id="ifYes" style="background-color: green; border: 2px solid #44db2c; display: none;" method="POST" class="btn btn-info">COORDINADOR</a>
  </div>
</center>

0 commentaires

3
votes

Vous n'avez pas besoin de JS, faites simplement écho ou enveloppez le HTML souhaité dans un si $ new est true directement sur le serveur- côté

Utilisation de PHP

<div id="subjectr">Content for new users</div>

<script>
var isNew = <?php echo json_encode($new); ?>;
document.getElementById("subjectr").style.display = isNew ? "block" : "none";
</script>
<!-- The above goes right before the closing </body> tag. -->

Utilisation de CSS (et PHP)

.isHidden { display: none; } /* Add this class to CSS file */

<div class="<?= $new ? '' : 'isHidden' ?>">Content for new users</div>

Ce qui précède peut s'avérer utile si, à un moment donné, en utilisant JavaScript, vous souhaitez basculer la visibilité d'un tel élément en utilisant .classList.toggle ('isHidden') ou .toggleClass de jQuery ( 'isHidden')

Utilisation de JavaScript (et PHP)

Si vous voulez vraiment passer votre variable PHP à JavaScript:

<?php if ($new) { ?>

<div>Content for new users</div>

<?php } ?>

PS:

La balise peut fonctionner dans certains navigateurs, mais elle est obsolète depuis longtemps. Utilisez plutôt CSS.
La valeur est un attribut HTML5 non valide pour l'élément div . Utilisez plutôt data-value .
Que fait la method = POST; sur une balise ?
var var est une erreur de syntaxe en JavaScript, var étant un mot réservé . Utilisez plutôt un var isNew plus descriptif.

0 commentaires

0
votes

Pour commencer, vous devez éviter d'utiliser var comme variable dans votre code JS, car il s'agit d'une clé réservée.

Pour votre problème, révisez votre code JS:

< pre> XXX

Vous pouvez obtenir le résultat de l'attribut en utilisant la méthode getAttribute en javascript ou la méthode attr en jQuery.

0 commentaires

-1
votes

Puisque vous marquez cela comme un problème PHP et CSS, je pense que notre fonction mobile est assez proche. Voici notre classe CSS "shownot":

 <div id="subjectr" class="<?php echo $new;?>">
    <a href="" id="ifYes" style="background-color: green; border: 2px solid #44db2c; display: none;" method=POST; class="btn btn-info">COORDINADOR</a>
 </div>

Ensuite, nous utilisons pour masquer certains cols sur les appareils mobiles, dans votre cas la var "$ new":

<?php
$new = isMobile() ? 'shownot' : '' ;
?>

Enfin, utilisez comme classe chaque fois que vous en avez besoin

.shownot { display: none !important; }

0 commentaires