Jump to content
  • 0

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


daggi
 Share

Question

Есть 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>
Link to comment
Share on other sites

Recommended Posts

  • 0

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

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);}
Link to comment
Share on other sites

  • 0

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

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

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

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

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

Link to comment
Share on other sites

  • 0

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

<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 делать требуемое действие
Link to comment
Share on other sites

  • 0

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

<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 делать требуемое действие

 

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

Link to comment
Share on other sites

  • 0

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

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

Edited by daggi
Link to comment
Share on other sites

  • 0

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

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

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

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

  • Like 1
Link to comment
Share on other sites

  • 0

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

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

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

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

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

Link to comment
Share on other sites

  • 0

Можно вот так

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

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

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

Edited by daggi
Link to comment
Share on other sites

  • 0

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

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

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

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

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

Link to comment
Share on other sites

  • 0

 

не заметно.

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

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);}

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

Link to comment
Share on other sites

  • 0

 

не заметно.

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

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, что то не помогло.

Link to comment
Share on other sites

  • 0

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

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

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

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

где vbs id формы

Edited by daggi
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy