Cet article explique comment résoudre le problème selon lequel le calcul du prix n'est pas mis à jour après la modification de la sélection du menu déroulant dans un formulaire dynamique piloté par jQuery. La solution principale consiste à encapsuler une logique de calcul complexe dans une fonction réutilisable et à garantir que lorsque toutes les entrées pertinentes (y compris les menus déroulants et autres champs affectant le prix) changent, la fonction est explicitement appelée pour un recalcul complet, garantissant ainsi l'exactitude en temps réel des données du formulaire.

Lors de la création de formulaires Web interactifs, en particulier dans des scénarios impliquant des calculs complexes, il est crucial de garantir que les champs du formulaire sont mis à jour de manière dynamique. Par exemple, dans un formulaire d'estimation de toit solaire Tesla, lorsque l'utilisateur sélectionne un ? type de complexité de toit ? différent, l'estimation de prix associée doit être mise à jour immédiatement. Cependant, comme la nature événementielle de jQuery est différente des mécanismes réactifs aux données des frameworks frontaux modernes (tels que React, Vue, Angular), les développeurs doivent gérer plus explicitement quand et comment les valeurs des formulaires sont recalculées et mises à jour.

Description du problème?: Le prix n'est pas mis à jour après la modification de la sélection du menu déroulant.

La question d'origine décrit un scénario dans lequel le menu déroulant ? Type de complexité du toit ? dans un formulaire d'estimation de toit solaire met correctement à jour le prix lorsque l'utilisateur sélectionne pour la première fois une option. Mais si l'utilisateur modifie ultérieurement la sélection, la valeur du prix dans le formulaire ne se met pas à jour. Cela indique que même si l'événement de modification du menu déroulant peut être déclenché, sa logique de calcul interne ne parvient pas à être réexécutée efficacement ou ne parvient pas à couvrir tous les champs de prix concernés.

Dans jQuery, l'écouteur d'événement $(selector).change() se déclenche uniquement lorsque la valeur de l'élément change réellement. Si la logique de calcul repose sur plusieurs entrées et que les modifications apportées à l'une de ces entrées peuvent affecter le résultat final, il ne suffit pas de s'appuyer sur l'événement de modification d'une seule entrée (comme un menu déroulant) pour déclencher tous les calculs. Plus communément, la logique de calcul elle-même peut comporter des conditions qui empêchent la mise à jour de tous les champs pertinents dans certaines circonstances.

Noyau de la solution : encapsulation et appel explicite de logique de calcul

La clé pour résoudre ce type de problème est d’encapsuler toute la logique de calcul qui repose sur la saisie de l’utilisateur dans une fonction distincte et réutilisable. De cette fa?on, chaque fois que l'une des entrées pertinentes change, cette fonction peut être appelée explicitement pour forcer un recalcul complet du prix et une mise à jour du formulaire.

1. Extraire les fonctions de calcul de base

Tout d’abord, extrayez la logique de calcul du prix et de mise à jour qui était initialement répartie dans le gestionnaire d’événements $(document).ready().change() dans une fonction JavaScript distincte. Cette fonction sera chargée de calculer tous les champs de prix pertinents en fonction des entrées du formulaire actuel (telles que la surface du toit, la taille du système, le type de complexité du toit, le nombre de Powerwalls, etc.).

Voici un exemple de fonction de calcul optimisée?:

 // Supposons que moneyFormat, calcRoofSqftInput, systemSizeInput, RoofCompInput,
// pwrWallPriceBeforeItc, estTotalBeforeItc, estItc, totalCostInput
// D'autres variables ont été correctement définies en externe et pointent vers l'objet ou la valeur jQuery correspondant.

fonction handleRoofPriceChange() {
  laissez le prix du toit = ??0?;
  const calculéRoofSqft = calcRoofSqftInput.val();
  const systemKw = systemSizeInput.val().replace(" kW", "");

  // Calculer le prix de base du toit en fonction du type de complexité du toit if (roofCompInput.prop("selectedIndex") === 1) { // Simple
    RoofPrice = calculéRoofSqft * 18 2000 * systemKw?;
  } else if (roofCompInput.prop("selectedIndex") === 2) { // Modéré
    RoofPrice = calculéRoofSqft * 20 2000 * systemKw?;
  } else if (roofCompInput.prop("selectedIndex") === 3) { // Complexe
    RoofPrice = calculéRoofSqft * 24 2000 * systemKw?;
  }

  RoofPriceBeforeItc.val(moneyFormat.format(roofPrice));

  {
    pwrWallPriceBeforeItc.val(moneyFormat.format(0)); // Assurez-vous que le prix du Powerwall est de 0
    estTotalBeforeItc.val(roofPriceBeforeItc.val()); // Prix total estimé (hors incentives)

    const totalBeforeItcValue = estTotalBeforeItc.val().replace(/[^\d\.]/g, "");
    estItc.val(moneyFormat.format(totalBeforeItcValue * 0.26)); // Estimation du crédit d'imp?t investissement solaire (CTI)

    const estItcValue = estItc.val().replace(/[^\d\.]/g, "");
    totalCostInput.val(moneyFormat.format(totalBeforeItcValue - estItcValue)); // Calculer le co?t total final}
  // Remarque?: Si le prix du Powerwall n'est pas égal à 0, la logique du bloc if ci-dessus ne sera pas exécutée.
  // Cela peut entra?ner la non mise à jour des autres champs de prix total à mesure que la complexité du toit change lorsque le prix Powerwall a une valeur.
  // Une implémentation plus robuste devrait rendre le calcul du prix total, de l'ITC et du co?t final indépendant de la détermination de savoir si pwrWallPriceBeforeItc est égal à 0.
}

2. Lier les fonctions de calcul aux événements pertinents

Dans $(document).ready(), liez cette nouvelle fonction handleRoofPriceChange à l'événement de changement du menu déroulant "Type de complexité du toit".

 $(document).ready(function () {
  // Lier l'événement de changement du menu déroulant RoofCompInput.change (handleRoofPriceChange);

  // ...autre code d'initialisation});

3. Appelez-le explicitement dans d'autres fonctions qui affectent les prix

En plus du menu déroulant, le formulaire peut contenir d'autres champs de saisie (tels que le nombre de batteries Powerwall, la surface du toit, etc.) qui affecteront le calcul du prix final. Lorsque les valeurs de ces champs changent, la fonction handleRoofPriceChange doit également être appelée explicitement pour garantir que tous les champs de prix sont mis à jour de manière synchrone.

Par exemple, lorsque l'utilisateur clique sur les boutons plus ou moins pour le nombre de batteries du Powerwall?:

 pwrWallBattPlusBtn.click(fonction () {
  si (pwrWallBattInput.val()  0) {
    pwrWallBattInput.get(0).value--;
  }
  // Après que la quantité du Powerwall ait changé, recalculez tous les prix handleRoofPriceChange();
});

// De même, pour les événements de modification des champs de saisie tels que calcRoofSqftInput, annualKwhInput, etc.,
// handleRoofPriceChange() doit également être appelé
calcRoofSqftInput.change(handleRoofPriceChange);
annualKwhInput.change(handleRoofPriceChange); // Si ce champ affecte la taille du système et donc le prix // ... tout autre champ de saisie pouvant affecter le prix

Exemple de code (partie JavaScript)

En combinant les étapes ci-dessus, la logique de base complète de JavaScript ressemblera à ceci?:

 // Supposons que ces objets et fonctions jQuery soient définis en haut du script // const RoofCompInput = $("#roof-complexity-type");
// const calcRoofSqftInput = $("#calculated-roof-sqft-input");
// const systemSizeInput = $("#system-size-input");
// const RoofPriceBeforeItc = $("#roof-price-before-itc-input");
// const pwrWallPriceBeforeItc = $("#powerwall-price-before-itc-input");
// const estTotalBeforeItc = $("#est-total-before-itc-input");
// const estItc = $("#est-itc-input");
// const totalCostInput = $("#total-cost-input");
// const pwrWallBattPlusBtn = $("#powerwall-battery-plus-btn");
// const pwrWallBattMinusBtn = $("#powerwall-battery-minus-btn");
// const pwrWallBattInput = $("#powerwall-battery-input");
// const moneyFormat = new Intl.NumberFormat('en-US', { style : 'currency', devise : 'USD' });


fonction handleRoofPriceChange() {
  laissez le prix du toit = ??0?;
  const calculéRoofSqft = calcRoofSqftInput.val();
  const systemKw = systemSizeInput.val().replace(" kW", "");

  // Calculer le prix de base du toit en fonction du type de complexité du toit if (roofCompInput.prop("selectedIndex") === 1) { // Simple
    RoofPrice = calculéRoofSqft * 18 2000 * systemKw?;
  } else if (roofCompInput.prop("selectedIndex") === 2) { // Modéré
    RoofPrice = calculéRoofSqft * 20 2000 * systemKw?;
  } else if (roofCompInput.prop("selectedIndex") === 3) { // Complexe
    RoofPrice = calculéRoofSqft * 24 2000 * systemKw?;
  }

  RoofPriceBeforeItc.val(moneyFormat.format(roofPrice));

  {
    pwrWallPriceBeforeItc.val(moneyFormat.format(0));
    estTotalBeforeItc.val(roofPriceBeforeItc.val());

    const totalBeforeItcValue = estTotalBeforeItc.val().replace(/[^\d\.]/g, "");
    estItc.val(moneyFormat.format(totalBeforeItcValue * 0.26));

    const estItcValue = estItc.val().replace(/[^\d\.]/g, "");
    totalCostInput.val(moneyFormat.format(totalBeforeItcValue - estItcValue));
  }
}

$(document).ready(function () {
  // Effectue un calcul lors de l'initialisation pour garantir que le prix correct est affiché au chargement de la page // handleRoofPriceChange(); // Détermine si un premier appel est nécessaire en fonction de la situation // Lie l'événement de changement du menu déroulant RoofCompInput.change(handleRoofPriceChange);

  // Lier l'événement click du bouton Powerwall pwrWallBattPlusBtn.click(function () {
    si (pwrWallBattInput.val()  0) {
      pwrWallBattInput.get(0).value--;
    }
    handleRoofPriceChange(); // Recalculer après que la quantité de Powerwall ait changé});

  // Lier l'événement de changement d'autres champs de saisie pouvant affecter le prix calcRoofSqftInput.change(handleRoofPriceChange);
  //annuelKwhInput.change(handleRoofPriceChange); // Si nécessaire // systemSizeInput.change(handleRoofPriceChange); // Si systemSizeInput est modifiable });

Points à noter et bonnes pratiques

1. Conversion du type de données?: lorsque vous effectuez des calculs mathématiques, assurez-vous que la valeur obtenue à partir du champ de saisie est correctement convertie en un type numérique. Par exemple, utilisez le signe plus unaire (tel que calcRoofSqftInput.val()) ou parseFloat() pour convertir. Pour les cha?nes monétaires, les caractères non numériques doivent être supprimés via des expressions régulières (telles que replace(/[^\d\.]/g, "")) avant la conversion.
2. Examen de la logique conditionnelle?: dans l'exemple de code, le bloc conditionnel if (roofPriceBeforeItc.val() !== 0 && pwrWallPriceBeforeItc.val() == 0) joue un r?le restrictif dans le calcul du prix Powerwall, du prix total, de l'ITC et du co?t final. Cela signifie que si le prix du Powerwall est différent de zéro ou si le prix du toit est nul, les calculs ultérieurs du prix total ne seront pas effectués. Ce comportement n’est peut-être pas attendu. Il est recommandé de réévaluer cette condition pour s'assurer que le prix total et l'ITC sont correctement calculés en fonction du prix actuel du toit et du prix du Powerwall, quel que soit le nombre de Powerwalls. Une structure plus robuste pourrait être?:
   • Calculez d’abord RoofPriceBeforeItc.
   • Calculez ensuite pwrWallPriceBeforeItc (si ce n'est pas une valeur fixe 0).
   • Enfin, une fois ces prix de base déterminés, estTotalBeforeItc, estItc et totalCostInput sont calculés uniformément pour éviter des restrictions inutiles.
3. Calcul initial?: vous devrez peut-être appeler la fonction handleRoofPriceChange() immédiatement après le chargement de la page pour vous assurer que le formulaire affiche le prix initial correct avant que l'utilisateur n'effectue une action.
4. Lisibilité et maintenabilité du code?:?encapsuler la logique de calcul dans des fonctions indépendantes améliore considérablement la lisibilité et la maintenabilité du code. Lorsque la logique métier change, une seule fonction doit être modifiée, plut?t que de dupliquer le code dans plusieurs gestionnaires d'événements.
5. Optimisation des performances (avancée)?: pour les formulaires comportant un grand nombre de champs de saisie et des calculs complexes, des appels fréquents aux fonctions de calcul peuvent avoir un impact sur les performances. Dans ce cas, pensez à utiliser des techniques de ? anti-rebond ? ou de ? throttle ? pour limiter la fréquence d'exécution de la fonction de calcul.

Résumer

Le problème des prix qui ne sont pas mis à jour dans les formulaires jQuery peut être résolu efficacement en encapsulant la logique de calcul dynamique du formulaire dans une fonction distincte et en garantissant que la fonction est explicitement appelée lorsque toutes les entrées pertinentes changent. Cette approche fournit un mécanisme clair et maintenable pour gérer le comportement dynamique du formulaire, garantissant que les utilisateurs voient toujours des estimations de prix précises et en temps réel. Dans le même temps, une évaluation minutieuse et une optimisation des conditions dans la logique de calcul peuvent encore améliorer la robustesse et la précision du système.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!