Пока еще не силен в 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/
В первую очередь нужно избавиться от классов типа "add-1" и "add-2". Отличать поведение лучше по дата-атрибутам (например, data-price="80"), а все события на кнопки и инпуты делать универсальными.
Тогда при добавлении третьего типа останется лишь просто добавить html-элементы и не придётся переписывать js.
После этой ключевой правки код можно будет проще читать и оптимизировать в дальнейшем.
Виртуальный выделенный сервер (VDS) становится отличным выбором
Есть jsp страница c списком предложений о продаже машинНа странице есть фильтр для получения предложений по моделям и маркам, который представляет...
Всем привет!Мне нужно прочитать файл допустим us_quantitytxt и поместить значение файла допустим в переменную us_quantity,я гуглил,честное слово но наткнулся...