Рефакторинг кода
Добрый вечер!
Прошу помощи в рефакторинге кода. Все работает как нужно, но слишком уж он получился громоздким. На странице есть слайдер, с помощью которого пользователь может выбирать необходимое время, и ему, в соответствии с его выбором, отображаются некие данные. Иногда некоторые данные не должны отображаться. К примеру при выборе минимального пакета, в услуги не будут включены некоторые опции. Написал такую "портянку". Возможно ли это чуть-чуть сократить?
stepSlider.noUiSlider.on('update', function( values, handle ) {
if (values == 3) {
$('.calc_time').html('3 часа');
$('.calc_price').html('350 руб.');
$('.calc_pic').html('от 10 картинок');
$('.calc_web_gall').html('');
$('.calc_col').html('');
} else if (values == 4) {
$('.calc_time').html('4 часа');
$('.calc_price').html('450 руб.');
$('.calc_pic').html('от 20 картинок');
$('.calc_web_gall').html('web-галерея');
$('.calc_col').html('');
} else if (values == 5) {
$('.calc_time').html('5 часов');
$('.calc_price').html('550 руб.');
$('.calc_pic').html('от 30 картинок');
$('.calc_web_gall').html('web-галерея');
$('.calc_col').html('');
} else if (values == 6) {
$('.calc_time').html('6 часов');
$('.calc_price').html('600 руб.');
$('.calc_pic').html('от 40 картинок');
$('.calc_web_gall').html('web-галерея');
$('.calc_col').html('');
} else if (values == 7) {
$('.calc_time').html('7 часов');
$('.calc_price').html('700 руб.');
$('.calc_pic').html('от 50 картинок');
$('.calc_web_gall').html('web-галерея');
$('.calc_col').html('');
} else if (values == 8) {
$('.calc_time').html('8 часов');
$('.calc_price').html('750 руб.');
$('.calc_pic').html('от 60 картинок');
$('.calc_web_gall').html('web-галерея');
$('.calc_col').html('*цветные');
} else if (values == 9) {
$('.calc_time').html('9 часов');
$('.calc_price').html('800 руб.');
$('.calc_pic').html('от 70 картинок');
$('.calc_web_gall').html('web-галерея');
$('.calc_col').html('*цветные');
} else {
$('.calc_time').html('10 часов');
$('.calc_price').html('850 руб.');
$('.calc_pic').html('от 80 картинок');
$('.calc_web_gall').html('web-галерея');
$('.calc_col').html('*цветные');
}
});
Спасибо за помощь) |
Constantin.UK,
1) Ты передаешь в функцию два параметра, но используешь только один - valuesЯ не ведаю твоих стратегических задумок, но handleне находит себе применения 2) Не понимаю, зачем ты используешь .html(...) Он используется для вставки маркапа с текстом. Используй .text(...) 3) Когда проверяешь одну переменную на соответствие разным значениям, то вместо вереницы else ifлучше использовать switch |
stepSlider.noUiSlider.on('update', function( values ) {
switch(values){
case 3: $('.calc_time').text('3 часа');
$('.calc_price').text('350 руб.');
$('.calc_pic').text('от 10 картинок');
$('.calc_web_gall').text('');
$('.calc_col').text('');
break;
case 4: $('.calc_time').text('4 часа');
$('.calc_price').text('450 руб.');
$('.calc_pic').text('от 20 картинок');
$('.calc_web_gall').text('web-галерея');
$('.calc_col').text('');
break;
case 5: $('.calc_time').text('5 часов');
$('.calc_price').text('550 руб.');
$('.calc_pic').text('от 30 картинок');
$('.calc_web_gall').text('web-галерея');
$('.calc_col').text('');
break;
case 6: $('.calc_time').text('6 часов');
$('.calc_price').text('600 руб.');
$('.calc_pic').text('от 40 картинок');
$('.calc_web_gall').text('web-галерея');
$('.calc_col').text('');
break;
case 7: $('.calc_time').text('7 часов');
$('.calc_price').text('700 руб.');
$('.calc_pic').text('от 50 картинок');
$('.calc_web_gall').text('web-галерея');
$('.calc_col').text('');
break;
case 8: $('.calc_time').text('8 часов');
$('.calc_price').text('750 руб.');
$('.calc_pic').text('от 60 картинок');
$('.calc_web_gall').text('web-галерея');
$('.calc_col').text('*цветные');
break;
case 9: $('.calc_time').text('9 часов');
$('.calc_price').text('800 руб.');
$('.calc_pic').text('от 70 картинок');
$('.calc_web_gall').text('web-галерея');
$('.calc_col').text('*цветные');
break;
default: $('.calc_time').text('10 часов');
$('.calc_price').text('850 руб.');
$('.calc_pic').text('от 80 картинок');
$('.calc_web_gall').text('web-галерея');
$('.calc_col').text('*цветные');
}
});
|
Напрашивается использование массивов параметров с индексом values
|
Constantin.UK,
stepSlider.noUiSlider.on('update', function(values, handle) {
$('.calc_time').text({
3: '3 часа',
4: '4 часа',
5: '5 часов',
6: '6 часов',
7: '7 часов',
8: '8 часов',
9: '9 часов',
10: '10 часов'
}[values] || '');
$('.calc_price').text({
3: '350 руб.',
4: '450 руб.',
5: '550 руб.',
6: '600 руб.',
7: '700 руб.',
8: '750 руб.',
9: '800 руб.',
10: '850 руб.'
}[values] || '');
$('.calc_pic').text({
3: 'от 10 картинок',
4: 'от 20 картинок',
5: 'от 30 картинок',
6: 'от 40 картинок',
7: 'от 50 картинок',
8: 'от 60 картинок',
9: 'от 70 картинок',
10: 'от 80 картинок'
}[values] || '');
$('.calc_web_gall').text(values > 3 ? 'web-галерея' : '');
$('.calc_col').text(values > 7 ? '*цветные' : '');
});
|
Отлично! Большое спасибо. Сейчас буду вдумчиво все разбирать, дабы не повторять таких ошибок.
|
Constantin.UK,
var calc_time =['10 часов','3 часа','4 часа','5 часов','6 часов','7 часов','8 часов','9 часов'];
var calc_price = ['850 руб.','350 руб.','450 руб.','550 руб.','600 руб.','700 руб.','750 руб.','800 руб.'];
var calc_pic = ['от 80 картинок','от 10 картинок','от 20 картинок','от 30 картинок''от 40 картинок','от 50 картинок','от 60 картинок','от 70 картинок'];
var calc_col = ['*цветные','','','','','','*цветные','*цветные'];
stepSlider.noUiSlider.on('update', function( values) {
var i;
if (values >=3 && values <= 9) i = values - 2;
else i = 0;
$('.calc_time').text(calc_time[i]);
$('.calc_price').text(calc_price[i]);
$('.calc_pic').text(calc_pic[i]);
$('.calc_web_gall').html('web-галерея');
$('.calc_col').html(calc-col[i]);
});
Условие для i может быть не вполне корректное - в соответствии с исходным текстом |
Dilettante_Pro,
как же при values = 3 получится '3 часа' ? |
рони,
исправил |
| Часовой пояс GMT +3, время: 03:09. |