Задать вопрос
@anndmill
javascript

Как лучше оптимизировать JavaScript код?

Здравствуйте.
Вопрос такой:
Есть в html-форме группа checkbox-сов. При выборе (либо снятии) отдельного checkbox напротив него появляется (либо исчезает) поле, в котором можно указать цифрой некое количество. Появление-исчесновение этих полей реализовано с помощью отдельных JS-функций.
Все нормально работает.
Я в JS не очень силен, но подозреваю, что эти отдельные функции можно объединить в одну, для сокращения кода.
Вот сам код:
<head>
<script type="text/javascript">
function handleChange1() {
var counch1 = document.getElementById('countspr1');
    var chkcou1 = document.getElementById('spr1');
        if(chkcou1.checked == true){
			counch1.style.display='inline';
			counch1.focus();
			counch1.value = 1;
			}
		else{
			counch1.style.display='none';
			counch1.value = '' ;
			}
    }
function handleChange2() {
var counch2 = document.getElementById('countspr2');
    var chkcou2 = document.getElementById('spr2');
        if(chkcou2.checked == true){
			counch2.style.display='inline';
			counch2.focus();
			counch2.value = 1;
			}
		else{
			counch2.style.display='none';
			counch2.value = '';
			}
    }
function handleChange3() {
var counch3 = document.getElementById('countspr3');
    var chkcou3 = document.getElementById('spr3');
        if(chkcou3.checked == true){
			counch3.style.display='inline';
			counch3.focus();
			counch3.value = 1;
			}
		else{
			counch3.style.display='none';
			counch3.value = '';
			}
    }	
</script>
</head>
<body>
<input style="display:none" id="countspr1" name="checkcountsp[]" type="text" maxlength="2" size="1" value="" > 
<input type="checkbox" id="spr1" name="checksp[]" onchange="handleChange1(this)" value="Товар 1">Товар 1
<br>
<input style="display:none" id="countspr2" name="checkcountsp[]" type="text" maxlength="2" size="1" value=""/> 
<input type="checkbox" id="spr2" name="checksp[]" onchange="handleChange2(this)" value="Товар 2">Товар 2
<br>
<input style="display:none" id="countspr3" name="checkcountsp[]" type="text" maxlength="2" size="1" value=""/> 
<input type="checkbox" id="spr3" name="checksp[]" onchange="handleChange3(this)" value="Товар 3">Товар 3
</body>

Заранее спасибо.
  • Вопрос задан
  • 2506 просмотров
Комментировать
Подписаться 3 Оценить Комментировать
Решения вопроса 2
romanzhak
@romanzhak
Mathematician
jsfiddle.net/AwVDc/2
function handleChange( ctx ) {
  var el = ctx.previousElementSibling;
   if( ctx.checked && el.nodeName.toLowerCase() === "input" ){
	el.style.display = 'inline';
        el.value = 1; 
	el.focus();
	} else {
	   el.style.display = 'none';
	 }
       };
Ответ написан
1 комментарий
1 комментарий
lexxpavlov
@lexxpavlov
Программист, преподаватель 
function handleChange(input) {
    var index = input.id.split('-')[1];
    var counch = document.getElementById('countspr-' + index);
    if (input.checked) {
	counch.style.display='inline';
	counch.value = 1;
	counch.focus();
    } else {
	counch.style.display='none';
	counch.value = '' ;
    }
}

Использовать так:
<input style="display:none" id="countspr-1" name="checkcountsp[]" type="text" maxlength="2" size="1" value="" > 
<input type="checkbox" id="spr-1" name="checksp[]" onchange="handleChange(this)">Товар 1

Обратите внимание, я добавил дефис в id элементов.
У элемента chackbox не ставится атрибут value. Если надо установить галочку, то ставится атрибут checked, если нужно вывести подсказку при наведении, то атрибут title:
<input type="checkbox" name="checkboxname" checked title="Подсказка"> Описание
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ответы на вопрос 3
Taraflex
@Taraflex
Ищу работу. Контакты в профиле.
jsfiddle.net/pLvMS
Ответ написан
Комментировать
Комментировать
Jabher
@Jabher
Я в JS не очень силен, но подозреваю, что эти отдельные функции можно объединить в одну, для сокращения кода.

Эти отдельные функции можно объединить в отсутствие функций и инструмент на css.

input[type="checkbox"].use-field:not(:checked) + .usable-field {
   display: none;
}
Ответ написан
1 комментарий
1 комментарий
iiil
@iiil
Инженер и вэб-дизайнер, рисую.
Используете ли Вы на сайте jquery? Код можно существенно сократить, используя, например, data-атрибуты.
Ответ написан
4 комментария
4 комментария
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
JavaScript Fullstack
OnClass
от 2 000 до 7 000 $
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
3д сцены
23 дек. 2024, в 04:30
10000 руб./за проект
Разработать телеграм бота с реферальной системой, Юкассой и ChatGPT
23 дек. 2024, в 02:13
20000 руб./за проект
Собрать из исходного кода и запустить в докере рабочее приложение с бд
22 дек. 2024, в 22:57
500 руб./за проект
Ещё заказы