204 Function selection de fond

Bonjour, voila la fonction de sélection de fond selon la valeur d'une radio fonctionne.
Le problème ou pas c'est que je doit faire cette fonction 12 fois pour 17 élément soit 204 fois et je me posait la question si cela n'allait pas ralentir le chargement de ma page et alourdir celle-ci ou causé des problèmes .
Et si il y avait moyen si cela ralenti la page de faire en sorte d'en minimiser l'impact.

Bonjour voila la fonction

<?php 
                $disponibi = get_sub_field( 'calendrier_section_2_gamme_conventionnelle__janvier_concombre' );
               function returndis($test) {
                   if ( $test == "disponible" ){
                       return "dispo";
                   }else{
                       return "fasle";
                   }
               }
               $dip = returndis($disponibi);
               
                ?>
            <script>
                var dispo = "<?PHP echo $dip;?>";
          onload = function load(){
                    if( dispo == 'dispo'){
                        document.getElementById("FConcombreJa").style.backgroundColor = "#a2c037";
                    }
                    else{
                        document.getElementById("FConcombreJa").style.backgroundColor = "#e6e6e6";
                            }
                }  
            </script>

elle vas être modifier pour cibler a chaque fois un élément différent.

Tu veux dire que tu vas écrire 200 fois la même fonction ? Quel est le code qui contient la boucle de ces différents éléments ?

Les problèmes de performance ne devraient pas t'inquiéter pour ce genre de script. Mais on peut facilement augmenter le temps d'exécution d'un script par un mauvais algorithme. Pour éviter ça, il faut commencer par mettre de l'ordre dans son code. Voici un exemple plus propre de ton javascript :

const AVAILABLE = "<?PHP echo $dip;?>"
const AVAILABILITY = 'dispo'
const AVAILABLE_COLOR = '#a2c037'
const UNAVAILABLE_COLOR = '#e6e6e6'

function changeBackgroundColor(itemId, color) {
  document.getElementById(itemId).style.backgroundColor = color
}

function retrieveAvailableColor(available) {
  return available == AVAILABILITY ? AVAILABLE_COLOR : UNAVAILABLE_COLOR
}

function changeBackgroundColorToAvailable(itemId) {
  const color = retrieveAvailableColor(AVAILABLE)
  changeBackgroundColor(itemId, color)
}

function load() {
  changeBackgroundColorToAvailable('FConcombreJa')
}  

Modifié par Ostara (19 Aug 2020 - 16:52)

Bonjour, désolé pour le temps de réponse.
Je suis débutant en php et javascript donc oui j’ai fait plusieurs fois cette fonction pour les différents éléments. ma page se présente comme sa

<div class="selectorfrise">
                <?php the_sub_field( 'calendrier_section_2_gamme_conventionnelle__janvier_concombre' ); ?>
				<?php the_sub_field( 'calendrier_section_2_gamme_conventionnelle_fevrier_concombre_' ); ?>
				<?php the_sub_field( 'calendrier_section_2_gamme_conventionnelle_mars_concombre' ); ?>
				<?php the_sub_field( 'calendrier_section_2_gamme_conventionnelle_avril_concombre' ); ?>
				<?php the_sub_field( 'calendrier_section_2_gamme_conventionnelle_mai_concombre' ); ?>
				<?php the_sub_field( 'calendrier_section_2_gamme_conventionnelle_juin_concombre' ); ?>
				<?php the_sub_field( 'calendrier_section_2_gamme_conventionnelle_juillet_concombre' ); ?>
				<?php the_sub_field( 'calendrier_section_2_gamme_conventionnelle_aout_concombre' ); ?>
				<?php the_sub_field( 'calendrier_section_2_gamme_conventionnelle_septembre_concombre' ); ?>
				<?php the_sub_field( 'calendrier_section_2_gamme_conventionnelle_octobre_concombre' ); ?>
				<?php the_sub_field( 'calendrier_section_2_gamme_conventionnelle_novembre_concombre' ); ?>
				<?php the_sub_field( 'calendrier_section_2_gamme_conventionnelle_decembre_concombre' ); ?>
/* Ici les valeur attribué par les différentes checkbox */
            </div>
            <!--Frise de disponibilité Concombre!-->
            <div class="FriseDip col-6">
                <p class="FConcombreJa" id="FConcombreJa">J</p>
                <p class="FConcombreFe" id="FConcombreFe">F</p>
                <p class="FConcombreMa" id="FConcombreMa">M</p>
                <p class="FConcombreAv" id="FConcombreAv">A</p>
                <p class="FConcombreMai" id="FConcombreMai">M</p>
                <p class="FConcombreJui" id="FConcombreJui">J</p>
                <p class="FConcombreJuillet" id="FConcombreJuillet">J</p>
                <p class="FConcombreAou" id="FConcombreAou">A</p>
                <p class="FConcombreSep" id="FConcombreSep">S</p>
                <p class="FConcombreOct" id="FConcombreOct">O</p>
                <p class="FConcombreNov" id="FConcombreNov">N</p>
                <p class="FConcombreDec" id="FConcombreDec">D</p>
            </div>
/* et là l'endroit où l'arrière plan change de couleur */

<?php 
                $disponibi = get_sub_field( 'calendrier_section_2_gamme_conventionnelle__fevrier_concombre' );
               function returndis($test) {
                   if ( $test == "disponible" ){
                       return "dispo";
                   }else{
                       return "fasle";
                   }
               }
               $dipFevC = returndis($disponibi);
               
                ?>
            

 
     var dispoFevC = "<?PHP echo $dip;?>";
          onload = function load(){
                    if( dispoFevC == 'dispo'){
                        document.getElementById("FConcombreJFev").style.backgroundColor = "#a2c037";
                    }
                    else{
                        document.getElementById("FConcombreJFev").style.backgroundColor = "#e6e6e6";
                            }
                } 

Je me doute bien qu'il y ai une meilleure façon de faire mais je ne la connait.
C'est pour sa que je demandé si sa allait ralentir ma page.
C'est une demande de la personne pour qui je fait le site il veut pouvoir changer l'arrière plan des divs juste en passant par une checkbox.
Bonne journée à tous

Bonjour, le problème est plus un problème de lisibilité et de maintenance du code que de. performances. Il faut d'abord apprendre à faire des boucles, voici un exemple, à adapter:

<?php
  $months = [
    'janvier', 'fevrier', 'mars', 'avril', 'mai', 'juin', 'juillet',
    'aout', 'septembre', 'octobre', 'novembre', 'decembre'
  ];
?>
<div class="selectorfrise">
  <?php
     foreach($months as $month) {
      the_sub_field( 'calendrier_section_2_gamme_conventionnelle__' . $month . '_concombre' );
     }
  ?>
</div>
<div class="FriseDip col-6">
  <?php foreach($months as $month): ?>
    <p class="FConcombre-<?php print $month; ?>" id="FConcombre-<?php print $month; ?>">
        <?php print strtoupper($month[0]); ?>
    </p>
  <?php endforeach; ?>
<div>

La même chose pour cette partie

<?php 
$dispos = [];
foreach($months as $month) {
  $disp = get_sub_field( ''calendrier_section_2_gamme_conventionnelle__' . $month . '_concombre' ) === "disponible";
  $dispos[] = [
    'month' => $month,
    'dispo' => $disp
  ];
}
?>

puis on passe la structure de donnée au javascript grâce à json_encode, ensuite on boucle aussi:

var dispos = <?php print json_encode(dispos); ?>;
onload = function load(){
  for (const i=0; i<dispos.length; i++){
    const element = document.getElementById('FConcombre-' + dispos[i].month);
    if (dispos[i].dispo) {
      element.style.backgroundColor = '#a2c037';
    }
    else {
      element.style.backgroundColor = '#e6e6e6';
    }
  }
} 

Modifié par kustolovic (21 Aug 2020 - 12:42)