0

не работает калькулятор, в каждом классе должна отображаться своя сумма, калькулятор не работает так как скрипт не понимает откуда брать данные. В 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>

1
  • У вас пример не рабочий, с синтаксической ошибкой. 21 янв 2019 в 6:41

1 ответ 1

0
$('.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);
});

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.