Jump to content
  • 0

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

daggi

Asked by daggi,

 Share

Question

daggi Explorer

daggi

Posted
Posted

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

27 answers to this question

Recommended Posts

  • 0
Switch74 Rising Star

Switch74

Posted
Posted

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

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
Art Lev Explorer

Art Lev

Posted
Posted

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

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

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

Link to comment
Share on other sites
  • 0
daggi Explorer

daggi

Posted
  • Author
Posted

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
Switch74 Rising Star

Switch74

Posted
Posted

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

<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
daggi Explorer

daggi

Posted
  • Author
Posted

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

<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
Switch74 Rising Star

Switch74

Posted
Posted

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

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

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

Link to comment
Share on other sites
  • 0
daggi Explorer

daggi

Posted
  • Author
Posted (edited)

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

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

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

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

Edited by daggi
Link to comment
Share on other sites
  • 0
Switch74 Rising Star

Switch74

Posted
Posted

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

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

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

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

  • Like 1
Link to comment
Share on other sites
  • 0
daggi Explorer

daggi

Posted
  • Author
Posted

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

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

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

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

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

Link to comment
Share on other sites
  • 0
daggi Explorer

daggi

Posted
  • Author
Posted (edited)

Можно вот так

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
Switch74 Rising Star

Switch74

Posted
Posted

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

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

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

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

Link to comment
Share on other sites
  • 0
daggi Explorer

daggi

Posted
  • Author
Posted

вы точно использовали этот скрипт 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
daggi Explorer

daggi

Posted
  • Author
Posted

 

не заметно.

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

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
daggi Explorer

daggi

Posted
  • Author
Posted

 

не заметно.

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

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
daggi Explorer

daggi

Posted
  • Author
Posted (edited)

а 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
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • 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

  I accept