Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Помогите сократить скрипт (https://javascript.ru/forum/misc/73800-pomogite-sokratit-skript.html)

raspin 16.05.2018 13:28

Помогите сократить скрипт
 
Вот такую конструкцию можно сделать меньше?
if (document.getElementById('standart').checked) {sum2 += 0;} 
  else if (document.getElementById('splen').checked) {
	   if (document.getElementById('100').checked) {sum2 += 150;} 
	   if (document.getElementById('200').checked) {sum2 += 250;}
	   if (document.getElementById('300').checked) {sum2 += 350;}
	   if (document.getElementById('400').checked) {sum2 += 450;}
	   if (document.getElementById('500').checked) {sum2 += 550;}
	   if (document.getElementById('600').checked) {sum2 += 650;}
	   if (document.getElementById('700').checked) {sum2 += 750;}
	   if (document.getElementById('800').checked) {sum2 += 850;}
	   if (document.getElementById('900').checked) {sum2 += 950;}
	   if (document.getElementById('1000').checked) {sum2 += 1050;}
  }
    else if (document.getElementById('designer').checked) {
	   if (document.getElementById('100').checked) {sum2 += 75;} 
	   if (document.getElementById('200').checked) {sum2 += 125;}
	   if (document.getElementById('300').checked) {sum2 += 235;}
	   if (document.getElementById('400').checked) {sum2 += 458;}
	   if (document.getElementById('500').checked) {sum2 += 569;}
	   if (document.getElementById('600').checked) {sum2 += 652;}
	   if (document.getElementById('700').checked) {sum2 += 758;}
	   if (document.getElementById('800').checked) {sum2 += 863;}
	   if (document.getElementById('900').checked) {sum2 += 912;}
	   if (document.getElementById('1000').checked) {sum2 += 1087;}
  }

  else if (document.getElementById('cover').checked) {
	   if (document.getElementById('100').checked) {sum2 += 12;} 
	   if (document.getElementById('200').checked) {sum2 += 28;}
	   if (document.getElementById('300').checked) {sum2 += 34;}
	   if (document.getElementById('400').checked) {sum2 += 47;}
	   if (document.getElementById('500').checked) {sum2 += 59;}
	   if (document.getElementById('600').checked) {sum2 += 65;}
	   if (document.getElementById('700').checked) {sum2 += 72;}
	   if (document.getElementById('800').checked) {sum2 += 88;}
	   if (document.getElementById('900').checked) {sum2 += 93;}
	   if (document.getElementById('1000').checked) {sum2 += 114;}
  }

laimas 16.05.2018 13:42

<input type="checkbox" data-val="150">
и т.п.

Получаем все выбранные флажки и складываем значения из data-val.

PS. Если value флажков иным не задействовано, то хранить эти значения лучше в нем, а не в data-val.

рони 16.05.2018 13:51

laimas,
4 варианта для data-val не многовато?

Dilettante_Pro 16.05.2018 13:54

На самом деле как-то странно: Это чекбоксы? И может быть множественный выбор вариантов? и все суммировать?

laimas 16.05.2018 13:54

Цитата:

Сообщение от рони
4 варианта для data-val не многовато?

Судя по ID, это группы, так что нет проблем. Не зная, что все это значит, судить трудно, но чутье подсказывает, что нужно использовать value и группировать по классу или родителю, которого определяют ID.

raspin 16.05.2018 13:55

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

function getOrderStampSum() {
  var sum = 0;
  var sum2 = 0;
  var sum3 = 0;
  var sum4 = 0;
  var sum5 = 0;
  
       if (document.getElementById('100').checked) {sum += 297;} 
  else if (document.getElementById('200').checked) {sum += 421;} 
  else if (document.getElementById('300').checked) {sum += 545;} 
  else if (document.getElementById('400').checked) {sum += 710;} 
  else if (document.getElementById('500').checked) {sum += 834;}
  else if (document.getElementById('600').checked) {sum += 958;}
  else if (document.getElementById('700').checked) {sum += 1123;}
  else if (document.getElementById('800').checked) {sum += 1247;}
  else if (document.getElementById('900').checked) {sum += 1371;}
  else if (document.getElementById('1000').checked) {sum += 1537;}
  
       if (document.getElementById('design1').checked) {sum5 += 0;} 
  else if (document.getElementById('design2').checked) {sum5 += 100;} 
  else if (document.getElementById('design3').checked) {sum5 += 300;} 
  else if (document.getElementById('design4').checked) {sum5 += 500;} 
  
       if (document.getElementById('sides1').checked) {sum3 += 0;} 
  else if (document.getElementById('sides2').checked) {
       if (document.getElementById('100').checked) {sum3 += 120;}
  else if (document.getElementById('200').checked) {sum3 += 187;}
  else if (document.getElementById('300').checked) {sum3 += 255;}
  else if (document.getElementById('400').checked) {sum3 += 345;}
  else if (document.getElementById('500').checked) {sum3 += 413;}
  else if (document.getElementById('600').checked) {sum3 += 480;}
  else if (document.getElementById('700').checked) {sum3 += 570;}
  else if (document.getElementById('800').checked) {sum3 += 638;}
  else if (document.getElementById('900').checked) {sum3 += 705;}
  else if (document.getElementById('1000').checked) {sum3 += 795;}
  }
  
       if (document.getElementById('standart').checked) {sum2 += 0;} 
  else if (document.getElementById('splen').checked) {
	   if (document.getElementById('100').checked) {sum2 += 103;} 
	   if (document.getElementById('200').checked) {sum2 += 165;}
	   if (document.getElementById('300').checked) {sum2 += 226;}
	   if (document.getElementById('400').checked) {sum2 += 309;}
	   if (document.getElementById('500').checked) {sum2 += 371;}
	   if (document.getElementById('600').checked) {sum2 += 433;}
	   if (document.getElementById('700').checked) {sum2 += 516;}
	   if (document.getElementById('800').checked) {sum2 += 578;}
	   if (document.getElementById('900').checked) {sum2 += 639;}
	   if (document.getElementById('1000').checked) {sum2 += 721;}
  }
    else if (document.getElementById('designer').checked) {
	   if (document.getElementById('100').checked) {sum2 += 0;} 
	   if (document.getElementById('200').checked) {sum2 += 0;}
	   if (document.getElementById('300').checked) {sum2 += 0;}
	   if (document.getElementById('400').checked) {sum2 += 0;}
	   if (document.getElementById('500').checked) {sum2 += 0;}
	   if (document.getElementById('600').checked) {sum2 += 0;}
	   if (document.getElementById('700').checked) {sum2 += 0;}
	   if (document.getElementById('800').checked) {sum2 += 0;}
	   if (document.getElementById('900').checked) {sum2 += 0;}
	   if (document.getElementById('1000').checked) {sum2 += 0;}
  }

  else if (document.getElementById('cover').checked) {
	   if (document.getElementById('100').checked) {sum2 += 218;} 
	   if (document.getElementById('200').checked) {sum2 += 349;}
	   if (document.getElementById('300').checked) {sum2 += 481;}
	   if (document.getElementById('400').checked) {sum2 += 656;}
	   if (document.getElementById('500').checked) {sum2 += 787;}
	   if (document.getElementById('600').checked) {sum2 += 918;}
	   if (document.getElementById('700').checked) {sum2 += 1093;}
	   if (document.getElementById('800').checked) {sum2 += 1224;}
	   if (document.getElementById('900').checked) {sum2 += 1356;}
	   if (document.getElementById('1000').checked) {sum2 += 1530;}
  }
  
         if (document.getElementById('krug1').checked) {sum4 += 0;} 
  else if (document.getElementById('krug2').checked) {
       if (document.getElementById('100').checked) {sum4 += 50;}
  else if (document.getElementById('200').checked) {sum4 += 100;}
  else if (document.getElementById('300').checked) {sum4 += 150;}
  else if (document.getElementById('400').checked) {sum4 += 200;}
  else if (document.getElementById('500').checked) {sum4 += 250;}
  }
  
  document.getElementById('order_stamp_sum').innerHTML = sum+sum2+sum3+sum4+sum5;
}


То есть получается, что 30 разных материалов типа 'cover', 'designer' и т.д. Но все в количествах 100, 200, 300 и т.д. Писать вот такую конструкцию 30-40 раз вроде не правильно и грамоздко
else if (document.getElementById('splen').checked) {
	   if (document.getElementById('100').checked) {sum2 += 103;} 
	   if (document.getElementById('200').checked) {sum2 += 165;}
	   if (document.getElementById('300').checked) {sum2 += 226;}
	   if (document.getElementById('400').checked) {sum2 += 309;}
	   if (document.getElementById('500').checked) {sum2 += 371;}
	   if (document.getElementById('600').checked) {sum2 += 433;}
	   if (document.getElementById('700').checked) {sum2 += 516;}
	   if (document.getElementById('800').checked) {sum2 += 578;}
	   if (document.getElementById('900').checked) {sum2 += 639;}
	   if (document.getElementById('1000').checked) {sum2 += 721;}

laimas 16.05.2018 14:11

Цитата:

Сообщение от raspin
То есть получается, что 30 разных материалов типа 'cover', 'designer' и т.д.

И кто владелец этих материалов? Надо полагать сервер. А где они содержатся на сервере? Надо полагать в базе. А есть проблемы с хранением этих данных в базе? И полагать не надо, ибо с этим проблем не должно быть. Так какие проблемы вывести эти данные на клиенте как набор флажков?

Проблемы возникают тогда, когда такие данные вываливают на клиенте в неудобном представлении, что у вас и наблюдается.

ksa 16.05.2018 14:11

Цитата:

Сообщение от raspin
Вот такую конструкцию можно сделать меньше?

Открой для себя циклы, массивы и объекты... ;)

laimas 16.05.2018 14:13

Цитата:

Сообщение от ksa
массивы и объекты

В данном случае они тут как собаке пятая лапа. :)

рони 16.05.2018 14:13

raspin,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<form action="http://" >
<input id="standart" name="item" type="radio"> standart
<input id="splen" name="item" type="radio"> splen
<input id="designer" name="item" type="radio"> designer
<input id="cover" name="item" type="radio"> cover
<br>
<input id="100" name="kol" type="radio"> 100
<input id="200" name="kol" type="radio"> 200

</form>

<div id="out"></div>
 <script>
var data = {
    splen: {
        100: 150,
        200: 250
    },
    designer: {
        100: 75,
        200: 125
    },
    cover: {
        100: 12,
        200: 28
    }
};
document.querySelector("form").addEventListener("change", function() {
    var sum = 0;
    var elem = document.querySelector('[name="item"]:checked');
    var obj;
    if (elem && (obj = data[elem.id])) {
        elem = document.querySelector('[name="kol"]:checked');
        if (elem && (obj = obj[elem.id])) sum += obj
    }
    document.querySelector("#out").innerHTML = sum
});
 </script>
</body>
</html>


Часовой пояс GMT +3, время: 11:26.