Не работает калькулятор javascript

100

21 августа 2019, 08:50

не работает калькулятор, в каждом классе должна отображаться своя сумма, калькулятор не работает так как скрипт не понимает откуда брать данные. В JS не так сильна, прошу помочь. Заранее благодарю за ответ.

$('.left_tab_mobile .onoffswitch-checkbox').on('click', function() { 
  checked = $(this).prop('checked'); 
  allPricemob = $('.js-subscription-price-summ-mob').text(); 
  allPricemob2 = $('.js-connection-price-summ-mob').text(); 
  allPricemob = parseInt(allPricemob.replace(/\s/g, '')); 
  allPricemob2 = parseInt(allPricemob2.replace(/\s/g, '')); 
 
  modifyPricemob = parseInt($(this).attr('data-price').replace(/\s/g, '')); 
  modifyPricemob2 = parseInt($(this).parent().parent().parent().parent().parent().find('.col-connection-cost').attr('data-price').replace(/\s/g, '')); 
  if (checked) { 
    sum = allPricemob + modifyPricemob; 
    sum2 = allPricemob2 + modifyPricemob2; 
  } else { 
    sum = allPricemob - modifyPricemob; 
    sum2 = allPricemob2 - modifyPricemob2; 
  } 
 
  $('.js-subscription-price-summ-mob').text(sum); 
  $('.js-connection-price-summ-mob').text(sum2); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="left_tab_mobile"> 
  <h3>Доп опции</h3> 
  <div class="product-option js-product-option" style="display: flex;"> 
    <div class="col-name"> 
      <div class="icon icon-service"></div> 
      <div class="col-name-inner">Онлайн контроль</div> 
      <div class="product-option-help" data-image="/media/devices/service.png" title=""></div> 
      <div style="display: flex; flex-direction:column;"> 
        <div style="display: flex; flex-direction: row;"> 
          <div style="padding: 12px 10px; color: #000;">Подключение</div> 
          <div class="col-connection-cost js-col-connection-cost" data-price="0">Бесплатно</div> 
        </div> 
        <div style="display: flex; flex-direction: row;"> 
          <div style="padding: 12px 10px; color: #000;">Абонентская плата</div> 
          <div class="col-subscription-cost js-col-subscription-cost" data-price="590">590&nbsp; 
            <div class="rub">руб/мес</div> 
          </div> 
        </div> 
      </div> 
    </div> 
    <div class="onoffswitch"><input class="onoffswitch-checkbox" id="wired_option_6920" name="wired_option_6920" type="checkbox"><label class="onoffswitch-label" for="wired_option_6920"></label></div> 
  </div> 
  <div class="product-option js-product-option" style="display: flex;"> 
    <div class="col-name"> 
      <div class="icon icon-service"></div> 
      <div class="col-name-inner">Онлайн контроль</div> 
      <div class="product-option-help" data-image="/media/devices/service.png" title=""></div> 
      <div style="display: flex;flex-direction:column;"> 
        <div style="display: flex; flex-direction: row;"> 
          <div style="padding: 12px 10px; color: #000;">Подключение</div> 
          <div class="col-connection-cost js-col-connection-cost" data-price="0">Бесплатно</div> 
        </div> 
        <div style="display: flex; flex-direction: row;"> 
          <div style="padding: 12px 10px; color: #000;">Абонентская плата</div> 
          <div class="col-subscription-cost js-col-subscription-cost" data-price="590">590&nbsp; 
            <div class="rub">руб/мес</div> 
          </div> 
        </div> 
      </div> 
    </div> 
    <div class="onoffswitch"><input class="onoffswitch-checkbox" id="wired_option_6921" name="wired_option_6921" type="checkbox"><label class="onoffswitch-label" for="wired_option_6921"></label></div> 
  </div> 
  <div class="product-option js-product-option" style="display: flex;"> 
    <div class="col-name"> 
      <div class="icon icon-service"></div> 
      <div class="col-name-inner">Онлайн контроль</div> 
      <div class="product-option-help" data-image="/media/devices/service.png" title=""></div> 
      <div style="display: flex;flex-direction:column;"> 
        <div style="display: flex; flex-direction: row;"> 
          <div style="padding: 12px 10px; color: #000;">Подключение</div> 
          <div class="col-connection-cost js-col-connection-cost" data-price="0">Бесплатно</div> 
        </div> 
        <div style="display: flex; flex-direction: row;"> 
          <div style="padding: 12px 10px; color: #000;">Абонентская плата</div> 
          <div class="col-subscription-cost js-col-subscription-cost" data-price="590">590&nbsp; 
            <div class="rub">руб/мес</div> 
          </div> 
        </div> 
      </div> 
    </div> 
    <div class="onoffswitch"><input class="onoffswitch-checkbox" id="wired_option_6922" name="wired_option_6922" type="checkbox"><label class="onoffswitch-label" for="wired_option_6922"></label></div> 
  </div> 
  <div class="product-option js-product-option" style="display: flex;"> 
    <div class="col-name"> 
      <div class="icon icon-service"></div> 
      <div class="col-name-inner">Онлайн контроль</div> 
      <div class="product-option-help" data-image="/media/devices/service.png" title=""></div> 
      <div style="display: flex;flex-direction:column;"> 
        <div style="display: flex; flex-direction: row;"> 
          <div style="padding: 12px 10px; color: #000;">Подключение</div> 
          <div class="col-connection-cost js-col-connection-cost" data-price="0">Бесплатно</div> 
        </div> 
        <div style="display: flex; flex-direction: row;"> 
          <div style="padding: 12px 10px; color: #000;">Абонентская плата</div> 
          <div class="col-subscription-cost js-col-subscription-cost" data-price="590">590&nbsp; 
            <div class="rub">руб/мес</div> 
          </div> 
        </div> 
      </div> 
    </div> 
    <div class="onoffswitch"><input class="onoffswitch-checkbox" id="wired_option_6923" name="wired_option_6923" type="checkbox"><label class="onoffswitch-label" for="wired_option_6923"></label></div> 
  </div> 
  <div class="product-option js-product-option" style="display: flex;"> 
    <div class="col-name"> 
      <div class="icon icon-service"></div> 
      <div class="col-name-inner">Онлайн контроль</div> 
      <div class="product-option-help" data-image="/media/devices/service.png" title=""></div> 
      <div style="display: flex;flex-direction:column;"> 
        <div style="display: flex; flex-direction: row;"> 
          <div style="padding: 12px 10px; color: #000;">Подключение</div> 
          <div class="col-connection-cost js-col-connection-cost" data-price="400">400&nbsp; 
            <div class="rub">руб</div> 
          </div> 
        </div> 
        <div style="display: flex; flex-direction: row;"> 
          <div style="padding: 12px 10px; color: #000;">Абонентская плата</div> 
          <div class="col-subscription-cost js-col-subscription-cost" data-price="590">590&nbsp; 
            <div class="rub">руб/мес</div> 
          </div> 
        </div> 
      </div> 
    </div> 
    <div class="onoffswitch"><input class="onoffswitch-checkbox" id="wired_option_6924" name="wired_option_6924" type="checkbox"><label class="onoffswitch-label" for="wired_option_6924"></label></div> 
  </div> 
  <div class="product-option js-product-option" style="display: flex;"> 
    <div class="col-name"> 
      <div class="icon icon-service"></div> 
      <div class="col-name-inner">Онлайн контроль</div> 
      <div class="product-option-help" data-image="/media/devices/service.png" title=""></div> 
      <div style="display: flex;flex-direction:column;"> 
        <div style="display: flex; flex-direction: row;"> 
          <div style="padding: 12px 10px; color: #000;">Подключение</div> 
          <div class="col-connection-cost js-col-connection-cost" data-price="300">300&nbsp; 
            <div class="rub">руб</div> 
          </div> 
        </div> 
        <div style="display: flex; flex-direction: row;"> 
          <div style="padding: 12px 10px; color: #000;">Абонентская плата</div> 
          <div class="col-subscription-cost js-col-subscription-cost" data-price="590">590&nbsp; 
            <div class="rub">руб/мес</div> 
          </div> 
        </div> 
      </div> 
    </div> 
    <div class="onoffswitch"><input class="onoffswitch-checkbox" id="wired_option_6925" name="wired_option_6925" type="checkbox"><label class="onoffswitch-label" for="wired_option_6925"></label></div> 
  </div> 
</div> 
<span>РЕЗУЛЬТАТ</span> 
<div class="right_tab_for_mobile"> 
  <div class="right_tab_info"> 
    <div class="title">Общая стоимость</div> 
    <div class="price"> 
      <div class="price-title">Подключение</div> 
      <div class="price-value"><strong class="connection-price-summ-mob js-connection-price-summ-mob">20 500</strong> <span class="rub">руб</span></div> 
    </div> 
    <div class="price"> 
      <div class="price-title">Абон. плата</div> 
      <div class="price-value"> 
        <strong class="js-subscription-price-summ-mob">10 350</strong> 
        <span class="rub">руб</span>/мес 
      </div> 
    </div> 
    <button type="button" class="btn btn-red-light call-modal-show" onclick="PriceFunction()">Оставить заявку</button> 
  </div> 
</div>

Answer 1

$('.left_tab_mobile .onoffswitch-checkbox').on('click', function() {
    checked = $(this).prop('checked');
    allPricemob = $('.js-subscription-price-summ-mob').text();
    allPricemob2 = $('.js-connection-price-summ-mob').text();
    allPricemob = parseInt(allPricemob.replace(/\s/g, ''));
    allPricemob2 = parseInt(allPricemob2.replace(/\s/g, ''));
    modifyPricemob = parseInt($(this).parent().parent().find('.js-col-subscription-cost').attr('data-price').replace(/\s/g, ''));
    modifyPricemob2 = parseInt($(this).parent().parent().find('.js-col-connection-cost').attr('data-price').replace(/\s/g, ''));
    if (checked) {
        sum = allPricemob + modifyPricemob;
        sum2 = allPricemob2 + modifyPricemob2;
    } else {
        sum = allPricemob - modifyPricemob;
        sum2 = allPricemob2 - modifyPricemob2;
    }
    $('.js-subscription-price-summ-mob').text(sum);
    $('.js-connection-price-summ-mob').text(sum2);
});

Вот так будет работать. Но это привязано к вёрстке.