42 одинаковых скрипта c различными парам-ми на одной странице

daggi · March 9, 2016

Есть 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>

Switch74 · March 11, 2016

не заметно.
почему у вас на сайте

window.calc = function(data_array){for(var n in data_array){var data = $('[data-id='+n+']');$(data).find('.names').html(data_array[n]['names']);$(data).find('.sht').html(data_array[n]['sht']);$(data).find('.ocen').html(data_array[n]['ocen']);}var sum = 0;$(".ocen").each( function () {sum += parseInt( $(this).text(), 10 );});$('.summ').html(sum);}

Art Lev · March 10, 2016

1. Вы подключили jQuery, и используете его (криво) 1 раз для подгрузки скрипта.

2. Для скрипта можно было бы сделать отдельную функцию, которая будет принимать id и innerHTML

3. На мой вгляд проще дергать таблицу или div - их будет всего 3, а не кучу полей вставлять.

daggi · March 10, 2016

1. Вы подключили jQuery, и используете его (криво) 1 раз для подгрузки скрипта.
2. Для скрипта можно было бы сделать отдельную функцию, которая будет принимать id и innerHTML
3. На мой вгляд проще дергать таблицу или div - их будет всего 3, а не кучу полей вставлять.

И как это логически реализовать?

Switch74 · March 10, 2016

Я бы сделал верстку на вроде этой

<tr data-id="1">   <td>Моторное масло, включая замену</td>   <td class="names"></td>   <td class="sht"></td>   <td class="ocen"></td></tr><tr data-id="2"   <td>Масляный фильтр, включая замену</td>   <td class="names"></td>   <td class="sht"></td>   <td class="ocen"></td></tr>

ну и дальше можете оббегать все элементы по class и проверяя data-id делать требуемое действие

daggi · March 10, 2016

Я бы сделал верстку на вроде этой
<tr data-id="1">   <td>Моторное масло, включая замену</td>   <td class="names"></td>   <td class="sht"></td>   <td class="ocen"></td></tr><tr data-id="2"   <td>Масляный фильтр, включая замену</td>   <td class="names"></td>   <td class="sht"></td>   <td class="ocen"></td></tr>
ну и дальше можете оббегать все элементы по class и проверяя data-id делать требуемое действие

Идея интересная, но картинка в целом не понятная

Switch74 · March 10, 2016

что-то вроде: https://jsfiddle.net/gh7bhd4d/

daggi · March 10, 2016

что-то вроде: https://jsfiddle.net/gh7bhd4d/

Круто ! а как размножить эту вещь?

Switch74 · March 10, 2016

размножить куда и что?

daggi · March 10, 2016

размножить куда и что?

у меня данные будут разные под эту форму. типа по маркам авто. это под одну марку.

Switch74 · March 10, 2016

они все на одной странице будут?

или может стоит сделать для каждой марки свою страницу?

ни чего не мешает добавить параметр который будет отличать марки и добавить все это в массив

daggi · March 10, 2016

они все на одной странице будут?
или может стоит сделать для каждой марки свою форму?
ни чего не мешает добавить параметр который будет отличать марки и добавить все это в массив

да , на странице будет много форм . пока сделал верстку http://www.zamena-masla-oilcity.ru/testovyij-shablonи формы. данные будут разные для каждой формы. и по умолчанию будет отображатся первые значения таблицы.

Edited March 10, 2016 by daggi

Switch74 · March 10, 2016

ну раз у вас все формы сразу на странице - что очень не очень

можно прямо в calc передавать нужные данные

https://jsfiddle.net/gh7bhd4d/1/

А вообще я бы данную всплывающую форму сделал одну и передавал бы в нее массивы данных на основе которых она бы выводила нужные данные в нужном виде.

daggi · March 10, 2016

ну раз у вас все формы сразу на странице - что очень не очень
можно прямо в calc передавать нужные данные
https://jsfiddle.net/gh7bhd4d/1/
А вообще я бы данную всплывающую форму сделал одну и передавал бы в нее массивы данных на основе которых она бы выводила нужные данные в нужном виде.

Чтобы сложить один столбик нужно все элементы столбца перебрать да?

Switch74 · March 10, 2016

ну да

daggi · March 10, 2016

ну да

по сути отдельный цикл нужно делать?

daggi · March 10, 2016

ну да

Вот как то так https://jsfiddle.net/gh7bhd4d/12/ ? Токо чета не совсем так тк не пашет как надо))

Edited March 10, 2016 by daggi

daggi · March 10, 2016

https://jsfiddle.net/gh7bhd4d/21/

Вот наконец то получилось . спасибо

Все тема закрыта, спасибо за помощь

Edited March 10, 2016 by daggi

Switch74 · March 10, 2016

Можно вот так

https://jsfiddle.net/gh7bhd4d/22/

daggi · March 11, 2016

Можно вот так
https://jsfiddle.net/gh7bhd4d/22/

Есть один косяк. Что он почему-то сумму считает по всем формам а не по данной форме. Как быть? Пример http://www.zamena-masla-oilcity.ru/testovyij-shablon

и как зачекать чтобы по умолчанию отображался первый radio . пробовал так checked="checked" не работает.

Edited March 11, 2016 by daggi

Switch74 · March 11, 2016

вы точно использовали этот скрипт https://jsfiddle.net/gh7bhd4d/22/

просто он при всем желании не смог бы посчитать все, а вот если вы использовали https://jsfiddle.net/gh7bhd4d/21/,то он собирает все цены из всех .ocen.

Опять же они у вас должны быть пустыми, но они все заполняются у вас во всех формах при клике по радио в одной из них.

Чтобы этого не было форма должна быть одна или связать наборы радио со своей формой, дав каждой форме уникальный id по которому их и вычислять.

daggi · March 11, 2016

вы точно использовали этот скрипт https://jsfiddle.net/gh7bhd4d/22/
просто он при всем желании не смог бы посчитать все, а вот если вы использовали https://jsfiddle.net/gh7bhd4d/21/,то он собирает все цены из всех .ocen.
Опять же они у вас должны быть пустыми, но они все заполняются у вас во всех формах при клике по радио в одной из них.
Чтобы этого не было форма должна быть одна или связать наборы радио со своей формой, дав каждой форме уникальный id по которому их и вычислять.

использовал я Ваш крутейший вариант https://jsfiddle.net/gh7bhd4d/22/

Но как их связать, чтобы он поля не суммировал. он какую то страшную сумму выдает типа что то ещё суммирует а нужно чтобы для каждой формы он свою сумму считал. Может и правда как то к idшнику привязать, как тогда логически алгоритм продумать правильный?

daggi · March 11, 2016

не заметно.

почему у вас на сайте

window.calc = function(data_array){for(var n in data_array){var data = $('[data-id='+n+']');$(data).find('.names').html(data_array[n]['names']);$(data).find('.sht').html(data_array[n]['sht']);$(data).find('.ocen').html(data_array[n]['ocen']);}var sum = 0;$(".ocen").each( function () {sum += parseInt( $(this).text(), 10 );});$('.summ').html(sum);}

извеняюсь да я не прав. случайно добавил скрипт не туда и по ошибке сохранив старый вариант, но Вы меня разоблачили. спасибо

daggi · March 11, 2016

не заметно.

почему у вас на сайте

window.calc = function(data_array){for(var n in data_array){var data = $('[data-id='+n+']');$(data).find('.names').html(data_array[n]['names']);$(data).find('.sht').html(data_array[n]['sht']);$(data).find('.ocen').html(data_array[n]['ocen']);}var sum = 0;$(".ocen").each( function () {sum += parseInt( $(this).text(), 10 );});$('.summ').html(sum);}

Я так понял тут chacked просто не установить, чтобы данные выбирались первого radio по умолчанию? пробовал load, что то не помогло.

Switch74 · March 11, 2016

а checked не здесь нужно устанавливать, а при вызове формы, на вроде этого

$('form input[type=radio]:first').attr({'checked':true})

daggi · March 11, 2016

а checked не здесь нужно устанавливать, а при вызове формы, на вроде этого
$('form input[type=radio]:first').attr({'checked':true})

Типа на онлоэд повесить ?

$('#vbs').on('change', function(){    $('form input[type=radio]:first').attr({'checked':true});});

где vbs id формы

Edited March 11, 2016 by daggi

Sign In

42 одинаковых скрипта c различными парам-ми на одной странице

Question

Link to comment

Share on other sites

27 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information