Калькулятор флажков Jquery продолжает возвращать NaN

ProgramBox

Калькулятор флажков Jquery продолжает возвращать NaN

Post author:admin
Запись опубликована:19 января, 2022
Post category:Вопросы по программированию

#javascript #jquery #node.js #wordpress

Вопрос:

у меня проблема с калукалотом с jquery. Настраиваемое поле флажка Wpform, возвращающее значение 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>

 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));
    }
  });
});

1. $('.wpforms-payment-total')/text() является ли текст «85 долларов», который не может быть проанализирован как int — очень похожий вопрос примерно час назад, это вы? Я дал вам ответ, вы удаляете $ его перед разбором

2. @Браво да, это был я, я новичок, извините за повторение. я учусь сейчас и застрял здесь 🙁 можете ли вы ответить мне на решение ?

3. Я сделал это в предыдущем вопросе

4. function editSalary() { var ns = $('.wpforms-payment-total').text(); ns = ns.replace(/([,.$]) /g, ''); $('.wpforms-payment-total').text(ns) } $( document ).ready(function() { editSalary(); });

Ответ №1:

Вы не можете разобрать какую-либо строку на число, вы можете либо разделить общую сумму на префикс и число, либо удалить из строки что-либо, кроме числа.

Поскольку я думаю, что хранение номера в его собственном теге имеет больше смысла, вот рабочий снип, который это делает.

 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>

Вот еще один метод, использующий атрибуты данных, чтобы сделать его более универсальным, возможно, вам захочется узнать об этом при работе с 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>

1. Спасибо! но WP Формирует <div class="wpforms-payment-total"> </div> автоматический подсчет и ввод там суммы для ex. <div class="wpforms-payment-total">500$ </div>

2. Это было бы хорошей информацией 🙂 Я соответствующим образом изменил свои сценарии.

3. Спасибо, сэр ! но та же проблема, я не знаю, что происходит 🙁 imgur.com/qEX2fAX

4. Это, скорее всего, было связано с несвойственными проблемами, а это означает, что ваша общая сумма меняется, и этот код не рассматривал такую возможность, я изменил его, чтобы он работал, если общая сумма изменится. Но вам также придется активировать функцию updateTotalFinal при изменении итогового значения, чтобы пересчитать итоговый результат

5. Большое спасибо, сэр ! теперь все работает, еще раз спасибо.

Ответ №2:

Сначала вы должны удалить все символы без цифр из цены, а затем использовать это,

Обратите внимание, что для checkbox этого лучше использовать 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>