Возможно ли как то оптимизировать код?

290
05 августа 2017, 06:01

Пока еще не силен в js. Написал работающий код, но мне кажется что может быть его можно как то сократить. Я думаю что код ужасный. Хотя и работает.

Подскажите что можно сделать лучше. Именно то что касается JS части.

Работает только добавление и удаление. Когда нажимаешь добавление появляется корзина.

JavaScript

//Калькулятор
  $(".add-1").on("click", function () {
    var button = $(this);
    var cart = $('.offer__cart');
    var oldValue = button.closest('.offer__block__calc').find("input").val();
    var text = button.find('i').text();
    var price = $('#price-small').text();
    var noActive = $('.offer__cart__count--1').closest('.active');
    noActive.removeClass('no-active');
    if (text == "+") {
      var newVal = parseFloat(oldValue) + 1;
      cart.fadeIn();
      cart.find('.offer__cart__count--1 span').text(newVal);
      $('.offer__cart__sum--1 span').text(newVal * price)
    } else {
      if (oldValue > 0) {
        var newVal = parseFloat(oldValue) - 1;
        cart.find('.offer__cart__count--1 span').text(newVal);
        $('.offer__cart__sum--1 span').text(newVal * price);
        if (newVal == 0) {
          noActive.addClass('no-active');
        }
      } else {
        newVal = 0;
        noActive.addClass('no-active');
      }
    }
    button.closest('.offer__block__calc').find("input").val(newVal);
  });
  $(".add-2").on("click", function () {
    var button = $(this);
    var cart = $('.offer__cart');
    var oldValue = button.closest('.offer__block__calc').find("input").val();
    var text = button.find('i').text()
    var price = $('#price-big').text();
    var noActive = $('.offer__cart__count--2').closest('.active');
    noActive.removeClass('no-active');
    if (text == "+") {
      var newVal = parseFloat(oldValue) + 1;
      cart.fadeIn();
      cart.find('.offer__cart__count--2 span').text(newVal);
      $('.offer__cart__sum--2 span').text(newVal * price)
    } else {
      if (oldValue > 0) {
        var newVal = parseFloat(oldValue) - 1;
        cart.find('.offer__cart__count--2 span').text(newVal);
        $('.offer__cart__sum--2 span').text(newVal * price);
        if (newVal == 0) {
          noActive.addClass('no-active');
        }
      } else {
        newVal = 0;
        noActive.addClass('no-active');
      }
    }
    button.closest('.offer__block__calc').find("input").val(newVal);
  });
  $('.offer__block__calc-1 input').keyup(function(){
    var curr = $(this);
    var currValue = $(this).val();
    $('.offer__cart__count--1').closest('.no-active').removeClass('no-active');
    var price = $('.offer__cart__price__clothes').text();
    $('.offer__cart').fadeIn();
    $('.offer__cart__count--1 span').text(currValue);
    $('.offer__cart__sum--1 span').text(currValue * price)
    if (currValue == 0) {
      $('.offer__cart__count--1').closest('.active').addClass('no-active');
    }
    if (currValue.length === 0) {
      $('.offer__cart__count--1 span').text(0);
      curr.val(0);
    }
  });
  $('.offer__block__calc-2 input').keyup(function(){
    var curr = $(this);
    var currValue = $(this).val();
    $('.offer__cart__count--2').closest('.no-active').removeClass('no-active');
    var price = $('.offer__cart__price__clothes-big').text();
    $('.offer__cart').fadeIn();
    $('.offer__cart__count--2 span').text(currValue);
    $('.offer__cart__sum--2 span').text(currValue * price);
    if (currValue == 0) {
      $('.offer__cart__count--2').closest('.active').addClass('no-active');
    }
    if (currValue.length === 0) {
      $('.offer__cart__count--2 span').text(0);
      curr.val(0);
    }
  });

здесь весь кодhttps://jsfiddle.net/gcjhnhze/

Answer 1

В первую очередь нужно избавиться от классов типа "add-1" и "add-2". Отличать поведение лучше по дата-атрибутам (например, data-price="80"), а все события на кнопки и инпуты делать универсальными.

Тогда при добавлении третьего типа останется лишь просто добавить html-элементы и не придётся переписывать js.

После этой ключевой правки код можно будет проще читать и оптимизировать в дальнейшем.

READ ALSO
Как вывести на сайт данные из коллекции mongo

Как вывести на сайт данные из коллекции mongo

Как вывести на сайт данные из коллекции mongo

319
Почему не срабатывает AJAX запрос?

Почему не срабатывает AJAX запрос?

Есть jsp страница c списком предложений о продаже машинНа странице есть фильтр для получения предложений по моделям и маркам, который представляет...

414
Как прочитать файл через JS на сервере

Как прочитать файл через JS на сервере

Всем привет!Мне нужно прочитать файл допустим us_quantitytxt и поместить значение файла допустим в переменную us_quantity,я гуглил,честное слово но наткнулся...

444