1
Je construis des widgets qui permettent aux utilisateurs de sélectionner des boutons radio et jquery calcule ensuite le total dû. Actuellement, les calculs de jquery sont mélangés puisqu'ils sont sur la même page. J'ai essayé de changer #ids et tel, mais il ne fonctionne toujours pas. Voici ce que j'ai jusqu'à présent:Deux scripts jquery pour additionner l'entrée de formulaire
Widget 1
<script type="text/javascript">
jQuery(document).ready(function($) {
function recalculate() {
var sum = 0;
$("input[type=radio]:checked").each(function() {
sum += parseInt($(this).attr("value"));
});
$("#output").html(sum.toFixed(2));
}
$("input[type=radio]").change(function() {
recalculate();
$('#invoice_description').val($(this).attr('rel'));
});
});
</script>
échantillon de ma forme
<div class="form-row">
<div class="form-row-title"><input type="radio" class="checkbox" name="register" value="<?php echo $vendor; ?>" checked /></div>
<div class="form-row-label">Vendor Registration (Up To 3 Attendees: $<?php echo $vendor; ?>)</div>
<div class="clear"></div>
</div>
<div class="form-row">
<div class="form-row-title" style="color: #090; font-weight: 700;">Total Due:</div>
<div class="form-row-content" style="padding: 10px 0;"><b><span id="output">0.00</span></b></div>
<div class="clear"></div>
</div>
Widget 2
<script type="text/javascript">
jQuery(document).ready(function($) {
function recalculate() {
var sum = 0;
$(".dues input[type=radio]:checked").each(function() {
sum += parseInt($(this).attr("value"));
});
$("#output2").html(sum.toFixed(2));
}
$(".dues input[type=radio]").change(function() {
recalculate();
$('#dues_description').val($(this).attr('rel'));
});
});
</script>
échantillon widget 2 forme
<div class="form-row">
<div class="form-row-title">
<input type="radio" id="general" class="dues" name="membership" value="<?php echo $general; ?>" rel="General Society Membership" />
</div>
<div class="form-row-label">General Society Membership ($<?php echo $general; ?>) <i id="general-tip" class="fa fa-question-circle fa-1x"></i></div>
<div class="clear"></div>
</div>
<div class="form-row">
<div class="form-row-title" style="color: #090; font-weight: 700;">Total Due:</div>
<div class="form-row-content" style="padding: 10px 0;"><b><span id="output2">0.00</span></b></div>
<div class="clear"></div>
</div>
est-ce que widget1 interfère avec widget2 mais pas l'inverse? Je suis curieux parce que widget2 a un sélecteur d'entrée plus spécifique, alors que widget1 recherche toutes les entrées radio qui sont vérifiées. Ainsi, sur la page, widget1 regarderait toute entrée radio vérifiée, alors que widget2 ne chercherait que les radios vérifiées dans '.dues'. En outre, widget1 attache les auditeurs à toutes les radios à l'écran. – Brodie
Pour éviter toute confusion, il ne s'agit pas d'un exemple de [widget jQuery] (https://learn.jquery.com/jquery-ui/widget-factory/how-to-use-the-widget-factory/) et vous rencontrez ce problème en raison de la portée de votre variable 'sum'. Vous ne rencontrerez pas ce problème si vous suivez quelques exemples de widget :) et les appliquer à votre situation – wahwahwah
N'a pas dit que je faisais un widget jquery, ceci est un widget admin wordpress en utilisant certains jquery. la somme n'est totalisée que dans le premier widget, mais le deuxième widget s'ajoute au premier total du widget. Si ça a du sens. J'ai juste essayé d'ajouter un sélecteur d'entrée plus spécifique au widget 1 mais pas de chance. – RiotAct