Можно ли это как то упростить?

Question

[olya_097]

Ведь многое повоторяется

к примеру recount_single
и recount_basket_product

https://jsfiddle.net/dmwtnu84/

Comments

[Сергей c0re]

Можно.

[olya_097]

Сергей, а как?
подскажите, пожалуйста

[Сергей c0re]

olya_097, не очень интересно читать сырой код без комментариев, всего лишь какой-то кусок без целого.

просто берете и все повторяющиеся элементы/действия заменяете одной функцией/методом.
какой-то кусок много раз повторяется? выделяете его в отдельную функцию и в тех местах уже вызываете эту функцию.

Answer 1

[Сергей c0re]

Ок, если вам не интересно просто подумать, то примерно так:

function recountItem(el_summ, el_quantity, n_price, e) {
  action = e ? e.target.className.match(/\w+_+(\w+)/)[1] : '';
  n_quantity = parseInt(el_quantity.text());
  switch(action){
    case 'plus':
    case 'increment':
      n_quantity ++;
      break;
    case 'minus':
    case 'decrement':
      n_quantity = n_quantity > 1 ? n_quantity - 1 : n_quantity;
      break;
  }
  el_quantity.text(n_quantity);
  el_summ.text(n_quantity * n_price + ' грн.');
};

//order

$('.order__block').each(function() {
  var $e = $(this),
      el_quantity = $e.find('.order__value'),
      el_summ = $e.find('.order__sum'),
      n_price = $e.find('.order__value').attr('data-number');

  $e.find('.order__plus').click(function(e) {
    recountItem(el_summ, el_quantity, n_price, e)
  });

  $e.find('.order__minus').click(function(e) {
    recountItem(el_summ, el_quantity, n_price, e)
  });

  recountItem(el_summ, el_quantity, n_price);
});

//single

$('.single__row').each(function() {
  var $e = $(this),
      el_quantity = $e.find('.single__count'),
      el_summ = $e.find('.single__price'),
      n_price = $e.find('.single__count').attr('data-price');

  $e.find('.single__increment').click(function(e) {
    recountItem(el_summ, el_quantity, n_price, e)
  });

  $e.find('.single__decrement').click(function(e) {
    recountItem(el_summ, el_quantity, n_price, e)
  });

  recountItem(el_summ, el_quantity, n_price);
});

//basket

$('.basket__item').each(function() {
  var $e = $(this),
      el_quantity = $e.find('.basket__value> span'),
      el_summ = $e.find('.basket__sum'),
      n_price = $e.find('.basket__single').text();

  $e.find('.single__increment').click(function(e) {
    recountItem(el_summ, el_quantity, n_price, e);
    updateBasketTotalSum();
  });

  $e.find('.single__decrement').click(function(e) {
    recountItem(el_summ, el_quantity, n_price, e);
    updateBasketTotalSum();
  });

  recountItem(el_summ, el_quantity, n_price);
  updateBasketTotalSum();
});

function updateBasketTotalSum() {
  var sum = 0;
  $('.basket__sum').each(function() {
     sum += parseInt($(this).text());
   });
  $('.basket__count').text(sum + ' грн.');
}

$('.basket__close').on('click', function() {
  $(this).parent().parent().remove();
});

если нигде в синтаксисе не ошибся, то должно работать вроде как.

PS: все повторяющиеся действия вынесены в ОДНУ функцию, тем более что у вас во все функции передавались ссылки на html элементы и действия абсолютно одинаковые. А action определяется по className элемента, который берется из event'а

PPS: только какой профит с готового решения??

Comments

[olya_097]

Сергей, спасибо, как только буду за пк гляну

Просто я не знала что нужно регуляркой

А почему во второй строчке нужно именно [1], а не [0]?

upd. профит то будет
Ибо почему то ваш код не работает
ошибок в консоли нет

[Сергей c0re]

Просто я не знала что нужно регуляркой

не нужно, можно... можно по разному, это мое решение, т.к. action можно из класса взять.

А почему во второй строчке нужно именно [1], а не [0]?

потому что match возвращает массив и просто выполните в консоли браузера (в инспекторе)
"order__plus".match(/\w+_+(\w+)/)

тогда поймете.
1 - результат совпадения с регекспом
2 - результат совпадения со ( )
каждая ( ) запоминается в переменную, в данном случае она выводится в возвращаемом массиве и элемент соответствует порядковому номеру скобок (их может быть много)

Ибо почему то ваш код не работает

есть возможность поправить.
начните с того что поставьте в каждую функцию в начале console.log("название ф.")
увидите выполняются ли они в принципе.
и т.д.

[Сергей c0re]

olya_097, не знаю почему у вас не работет, у меня все работает, см.



PS: где вы код вставляете?
если вы его вставляете до вашего html и не в секцию onload , то да, он работать не будет, потому что на момент его загрузки и выполнения DOMа еще нет.