0
131
VisualizaçõesLa calculadora de casilla de verificación Jquery sigue devolviendo NaN
Tengo un problema de calucalot con jquery. Campo de casilla de verificación Wpform personalizado que devuelve NaN.
HTML
<div class="wpforms-payment-total"> $ 85 </div> <input type="checkbox" name="myBox2" size="12" /> With Two Coat + 15% <b><span id="totalfinal"></span> </b>JS
jQuery(document).ready(function() { var Valuee = $('.wpforms-payment-total'); jQuery('input[name="myBox2"]').on('click', function() { if (jQuery(this).is(':checked')) { var finalprice = parseInt($('.wpforms-payment-total').text()) * 1.15; jQuery('#totalfinal').text(finalprice.toFixed(2)); } else { var finalprice = parseInt($('.wpforms-payment-total').text()); jQuery('#totalfinal').text(finalprice.toFixed(2)); } }); }); 
·
Juan Pablo Isaza
2 Respostas
Responde à pergunta0
No puede analizar ninguna Cadena en un número, puede dividir su cantidad total en un prefijo y un número o tiene que eliminar cualquier cosa menos el número de la cadena.
Como creo que almacenar el número en su propia etiqueta tiene más sentido, aquí hay un fragmento funcional que hace eso.
jQuery(document).ready(function() { const Valuee = $('.wpforms-payment-total'); jQuery('input[name="myBox2"]').on('click', function() { let finalprice = parseInt(Valuee.text().replace(/^[^0-9,.]+/, "").match( /^[0-9,.]+/g, '')[0]); if (jQuery(this).is(':checked')) { finalprice *= 1.15; } jQuery('#totalfinal').text(finalprice.toFixed(2)); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wpforms-payment-total"> $ 85 </div> <input type="checkbox" name="myBox2" id="myBox2" size="12" /> <label for="myBox2">With Two Coat + 15%</label> <br> <b><span id="totalfinal"></span></b>Aquí hay otro método, usando atributos de datos para hacerlo más versátil, tal vez eso es algo sobre lo que querrás aprender cuando trates con jQuery:
jQuery(document).ready(function() { function updateTotalFinal(){ const subtotalValue = +jQuery('.wpforms-payment-total').text().replace(/^[^0-9,.]+/, "").match( /^[0-9,.]+/g, '')[0]; let totalValue = subtotalValue; const totalFinalElem = jQuery("#totalfinal"); jQuery("input.change-total:checked").each(function() { const $this = jQuery(this); if ($this.is("[data-method=add]")) { totalValue += +$this.data("amount"); } else if ($this.is("[data-method=multiply]")) { totalValue += subtotalValue * $this.data("amount"); } }); totalFinalElem.text(`$ ${totalValue}`); } jQuery("input.change-total").on("change", function() { updateTotalFinal(); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wpforms-payment-total"> 85€ </div> <label> <input type="checkbox" class="change-total" name="myBox2" size="12" data-amount="0.15" data-method="multiply" /> With Two Coat + 15% </label> <br> <label> <input type="checkbox" class="change-total" name="myBox3" size="12" data-amount="5" data-method="add" /> With extra Pants + $ 5 </label> <br> <b><span id="totalfinal">$ 85</span></b>
·
Juan Pablo Isaza
Relatório
0
Primero debe eliminar todos los caracteres que no sean dígitos del precio y luego usarlos,
Tenga en cuenta que para la checkbox de verificación es mejor usar el evento de change
jQuery('input[name="myBox2"]').on('change', function() { // Remove any non-digits character var price = parseInt($('.wpforms-payment-total').text().replace( /^\D+/g, '')); if (jQuery(this).is(':checked')) { var finalprice = price * 1.15; jQuery('#totalfinal').text(finalprice.toFixed(2)); } else { jQuery('#totalfinal').text(price.toFixed(2)); } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wpforms-payment-total"> $ 85 </div> <input type="checkbox" name="myBox2" size="12" /> With Two Coat + 15% <b><span id="totalfinal"></span> </b>
·
Juan Pablo Isaza
Relatório
Responde à pergunta