42 одинаковых скрипта c различными парам-ми на одной странице
Есть 42 формы в модальных окнах.
Для каждой Я написал считалку типа калькулятора c различными парам-ми для каждой формы на одной странице. как упростить код формы или скрипта чтобы не городить много кода форм?! <!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script> $(window).load(function () { calc(); }); function calc(){ if(document.getElementById('d1').checked == true){ var noil=document.getElementById('names1').innerHTML="Name12"; var coil=document.getElementById('sht1').innerHTML="1шт."; var cnoil=document.getElementById('ocen1').innerHTML=100; var fnoil=document.getElementById('names2').innerHTML="Name11"; var fcoil=document.getElementById('sht2').innerHTML="1шт."; var fcnoil=document.getElementById('ocen2').innerHTML=100; var fnvozd=document.getElementById('names3').innerHTML="Name13"; var fcvozd=document.getElementById('sht3').innerHTML="1шт."; var fcnvozd=document.getElementById('ocen3').innerHTML=500; var fnsalon=document.getElementById('names4').innerHTML="Name14"; var fcsalon=document.getElementById('sht4').innerHTML="1шт."; var fcnsalon=document.getElementById('ocen4').innerHTML=100; var discount = document.getElementById('discount'); var summed=document.getElementById('summ').innerHTML; var sm_k=cnoil+fcnoil+fcnvozd+fcnsalon; var proc=sm_k-(sm_k/100)*10; (discount.checked == true) ? summed.innerHTML=proc : summed; }else if(document.getElementById('d2').checked == true){ var noil=document.getElementById('names1').innerHTML="Name2"; var coil=document.getElementById('sht1').innerHTML="1шт."; var cnoil=document.getElementById('ocen1').innerHTML=10220; var fnoil=document.getElementById('names2').innerHTML="Name2"; var fcoil=document.getElementById('sht2').innerHTML="1шт."; var fcnoil=document.getElementById('ocen2').innerHTML=1200; var fnvozd=document.getElementById('names3').innerHTML="Name2"; var fcvozd=document.getElementById('sht3').innerHTML="1шт."; var fcnvozd=document.getElementById('ocen3').innerHTML=10; var fnsalon=document.getElementById('names4').innerHTML="Name2"; var fcsalon=document.getElementById('sht4').innerHTML="1шт."; var fcnsalon=document.getElementById('ocen4').innerHTML=100; var summed = document.getElementById('summ').innerHTML = cnoil+fcnoil+fcnvozd+fcnsalon; }else if(document.getElementById('d3').checked == true){ var noil=document.getElementById('names1').innerHTML="Name1"; var coil=document.getElementById('sht1').innerHTML="1шт."; var cnoil=document.getElementById('ocen1').innerHTML=400; var fnoil=document.getElementById('names2').innerHTML="Name2"; var fcoil=document.getElementById('sht2').innerHTML="1шт."; var fcnoil=document.getElementById('ocen2').innerHTML=100; var fnvozd=document.getElementById('names3').innerHTML="Name3"; var fcvozd=document.getElementById('sht3').innerHTML="1шт."; var fcnvozd=document.getElementById('ocen3').innerHTML=300; var fnsalon=document.getElementById('names4').innerHTML="Name4"; var fcsalon=document.getElementById('sht4').innerHTML="1шт."; var fcnsalon=document.getElementById('ocen4').innerHTML=100; var summed = document.getElementById('summ').innerHTML = cnoil+fcnoil+fcnvozd+fcnsalon; } } </script> </head> <body> <form name="cl_form"> <ul class="spmod"> <li><a class="btn" href="/testovyij-shablon#win00"><!--img width="186" src="/assets/auto/ld.png"--><p>Лада Калина, 2010 г.</p></a></li> </ul> <div class="dm-overlay" id="win00"> <div class="dm-table"> <div class="dm-cell"> <div class="dm-modal"> <a href="/testovyij-shablon#close" class="close"></a> <div class="mzg">---</div> <div class="car-model">Марка, 2010 г.</div> <div class="mzg2">Выберите вариант ТО:</div> <div class="rbd"> <div class="radio"><label><input type="radio" id="d1" name="type" value="premium" onclick="calc();" checked> Вариант "Премиум" (каждые 15 000 км)</label></div> <div class="radio"><label><input type="radio" id="d2" name="type" value="standart" onclick="calc();"> Вариант "Стандарт" (каждые 10 000 км)</label></div> <div class="radio"><label><input type="radio" id="d3" name="type" value="econom" onclick="calc();"> Вариант "Эконом" (каждые 7 000 км)</label></div> </div> <table> <tbody> <tr> <td class="ztabl"> Расходный материал </td> <td class="ztabl"> Марка </td> <td class="ztabl"> Количество </td> <td class="ztabl"> Стоимость, руб </td> </tr> <tr> <td>Моторное масло, включая замену</td> <td id="names1"></td> <td id="sht1"></td> <td id="ocen1"></td> </tr> <tr> <td>Масляный фильтр, включая замену</td> <td id="names2"></td> <td id="sht2"></td> <td id="ocen2"></td> </tr> <tr> <td>Воздушный фильтр, включая замену</td> <td id="names3"></td> <td id="sht3"></td> <td id="ocen3"></td> </tr> <tr> <td>Салонный фильтр, включая замену</td> <td id="names4"></td> <td id="sht4"></td> <td id="ocen4"></td> </tr> <tr> <td colspan="2"></td> <td>Итого, руб.</td> <td id="summ"></td> </tr> </tbody> </table> </div> </div> </div> </div> </form> </body> </html> |
dimas15,
Не привязываться к ID, а делать привязку к классу параметра и его порядковому номеру в массиве подобных, есть же нормальный поиск => querySelectorAll https://learn.javascript.ru/searchin...erySelectorAll ============== Торгда у вас функция расчета по каждому из параметров Моторное масло, включая замену Масляный фильтр, включая замену и т.д будет единой функцией о трёх входных переменных-параметра |
Все проблему решил
|
Часовой пояс GMT +3, время: 06:41. |