08.04.2017, 19:33
|
|
Интересующийся
|
|
Регистрация: 08.04.2017
Сообщений: 11
|
|
|
спасибо !! большое все доступно ))) извините что много глупых вопросов , только начал постигаю азы ))) не сразу понял что это выражение процентов ))
|
|
08.04.2017, 19:44
|
|
Интересующийся
|
|
Регистрация: 08.04.2017
Сообщений: 11
|
|
Сообщение от laimas
|
Константы, на которые производится умножение, можно содержать в атрибутах самих полей. Во-первых не потребуется менять скрипт, если они вдруг изменяться, а во вторых вот такого
a1=$("#a1").val()*7.5;
a2=32 *$("#a2").val();
a3=2 *$("#a3").val();
a4=230 *$("#a4").val();
a5=30 *$("#a5").val();
a6=15 *$("#a6").val();
a7=36 *$("#a7").val();
совсем не нежно будет, как и кучи переменных a1,a2,a3,a4,a5,a6,a7.
По событию ввода получайте коллекцию полей ввода и проходом в цикле получайте значение текущего поля, константу из атрибута, умножаем и т.д.
|
то есть если я правильно понял мы прописываем умножения на число непосредственно в input а в script уже через идинтификатор производим все действия |
|
08.04.2017, 20:03
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Сообщение от Andree007
|
|
мы прописываем умножения на число непосредственно в input а в script уже через идинтификатор производим все действия
|
И да, и нет. Множители прописываем в поля, а вот id совсем не нужны.
Всю шелуху типа border="2" cellpadding="0" cellspacing="0" height="200" width="650" id="" и valign="top" width="180" удалить, лучше это задать через CSS. Поля, это чисто поле, тип его, множитель, значение по умолчанию 0 можно и не использовать.
<input data-factor="7.5" type="number">
Если уж потребуется какая-то индивидуальность, то имя класса еще. Все, не стоит перегружать код лишним.
По событию выбрать только те поля формы (коллекцию полей) у которых есть установленное значение (смотрите filter() в JQ, но можно и без фильтра с проверкой или нулем по умолчанию) и флажки, которые выбраны. Обходим это набор в цикле, умножая data('factor') на значения поля, суммируя. Попробуйте самостоятельно, не получится, тогда уже с проблемами сюда. |
|
08.04.2017, 22:25
|
|
Интересующийся
|
|
Регистрация: 08.04.2017
Сообщений: 11
|
|
|
Сообщение от laimas
|
И да, и нет. Множители прописываем в поля, а вот id совсем не нужны.
Всю шелуху типа border="2" cellpadding="0" cellspacing="0" height="200" width="650" id="" и valign="top" width="180" удалить, лучше это задать через CSS. Поля, это чисто поле, тип его, множитель, значение по умолчанию 0 можно и не использовать.
<input data-factor="7.5" type="number">
Если уж потребуется какая-то индивидуальность, то имя класса еще. Все, не стоит перегружать код лишним.
По событию выбрать только те поля формы (коллекцию полей) у которых есть установленное значение (смотрите filter() в JQ, но можно и без фильтра с проверкой или нулем по умолчанию) и флажки, которые выбраны. Обходим это набор в цикле, умножая data('factor') на значения поля, суммируя. Попробуйте самостоятельно, не получится, тогда уже с проблемами сюда.
|
согласен нужно сокращать код )) про стили в отдельный фаил это верно , просто это черновик эксперементальный ...
а вот на счет сокращений скрипта не совсем разобрался попробовал вписать в input data-factor ... но не инициализировалось значение , если можно хотелось бы посмотреть на любой подобный вид кода )
чтобы разложить все по полочкам уже у себя в коде
|
|
08.04.2017, 22:48
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function() {
$('input').on('input', function() {
alert(this.getAttribute('data-factor')*this.value)
//в JQ значение можителя будет доступно как $(this).data('factor')
})
});
</script>
</head>
<body>
<input data-factor="7.5" type="number">
</body>
</html>
|
|
09.04.2017, 21:44
|
|
Интересующийся
|
|
Регистрация: 08.04.2017
Сообщений: 11
|
|
|
не пойму что не так ??? ешил просить код
$('document').ready(function(){
$(function() {
$('input').on('input', function() {
(this.getAttribute('data-factor')*this.value);
var a1,a2,a3,a4,a5,a6,a7
a1=$('a1')
a2=$('a2')
a3=$('a3')
a4=$('a4')
a5=$('a5')
a6=$('a6')
a7=$('a7')
var arr = (a1,a2,a3,a4,a5,a6,a7);
function arraySum(array){
var z = 0;
for(var i = 0; i < array.length; i++){
z += array[i];
}
}
if ($('#a8').prop('checked')) z *= 1.2;
if ($('#a9').prop('checked')) z *= 1.3;
if ($('#a10').prop('checked')) z += 800;
$('#rezz').html(z.toFixed(2)+' Рублей');
});
});
});
|
|
09.04.2017, 21:45
|
|
Интересующийся
|
|
Регистрация: 08.04.2017
Сообщений: 11
|
|
сори опечатка *(решил упростить код )  |
|
10.04.2017, 00:00
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,124
|
|
Andree007,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$("input").on("input click", function() {
var items = document.querySelectorAll('[type="number"][data-factor]');
var z = [].reduce.call(items, function(sum, el) {
var num = +el.value || 0,
factor = +el.dataset.factor || 0;
return sum + num * factor
}, 0);
items = document.querySelectorAll('[type="checkbox"]');
z = [].reduce.call(items, function(sum, el) {
var up = +el.dataset.up || 0,
factor = +el.dataset.factor || 0;
return !el.checked ? sum : up ? sum + up : sum + z * factor
}, z);
$("#rezz").html(z.toFixed(2) + " Рублей")
})
});
</script>
</head>
<body>
<form method=post id="myform">
<table border="2" cellpadding="0" cellspacing="0" height="200" width="650" id="" >
<tbody>
<tr>
<td valign="top" width="180">Сварка </td>
<td valign="top" width="80">7,5 р / см</td>
<td valign="top" width=""><input data-factor="7.5" type="number"></td>
</tr>
<tr>
<td valign="top" width="180">Рез, зачистка реза, сборка</td>
<td valign="top" width="80">32 р / шт</td>
<td valign="top" width="80"><input data-factor="32" type="number"></td>
</tr>
<tr>
<td valign="top" width="180">Зачистка шва</td>
<td valign="top" width="80">2 р / см</td>
<td valign="top" width="80"><input data-factor="2" type="number"></td>
</tr>
<tr>
<td valign="top" width="180">Покраска, обезжиривание, грунт (лист)</td>
<td valign="top" width="80">230 р / м.кв</td>
<td valign="top" width="80"><input data-factor="230" type="number"></td>
</tr>
<tr>
<td valign="top" width="180">Покраска, обезжиривание, грунт (профиль)</td>
<td valign="top" width="80">30 р /м.п</td>
<td valign="top" width="80"><input data-factor="30" type="number"></td>
</tr>
<tr>
<td valign="top" width="180">Шпаклевка шва</td>
<td valign="top" width="80">15 р / шт</td>
<td valign="top" width="80"><input data-factor="15" type="number"></td>
</tr>
<tr>
<td valign="top" width="180">Шлифовка шва </td>
<td valign="top" width="80">36 р / шт</td>
<td valign="top" width="80"><input data-factor="36" type="number"></td>
</tr>
<tr>
<td valign="top" width="180">Монтаж на объекте</td>
<td valign="top" width="80">20%</td>
<td valign="top" width="80"><input type="checkbox" data-factor=".2"></td>
</tr>
<tr>
<td valign="top" width="180">Дизайн</td>
<td valign="top" width="80">30%</td>
<td valign="top" width="80"><input type="checkbox" data-factor=".3"></td>
</tr>
<tr>
<td valign="top" width="180">Выезд замерщика</td>
<td valign="top" width="80">800р </td>
<td valign="top" width="80"><input type="checkbox" data-up="800"></td>
</tr>
<tr>
<td valign="top" width="280"><div id="rezz">итог</div></td>
<td valign="top" width="50"></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
|
|
10.04.2017, 02:47
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
Andree007,
не понятно зачем писать итог в ячейку с текстом "итог", а если для итога поле name="r", то это вообще профанация, это остальные поля должны иметь имена, сервер сам должен считать итог на основе выбора, все что на клиенте только для клиента.
Оперируя полями типа number нужно обязательно задавать им минимальное значение, иначе могут быть и отрицательные значения. Эти же поля надо полагать основные, а флажки лишь дополнительные опции, следовательно нужно не просто считать, а и проверять наличие выбора, что необходимо при отправке формы. То есть все действа делегируем форме.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function() {
$('form').on('input submit', function(e) {
e.preventDefault();
var v = a = 0, p = 1, r = $('#r').empty();
//основные поля
$.each($(this.elements).slice(0, -4), function() {
if($.trim(this.value)) v += this.getAttribute('factor') * this.value
});
//есть выбор, отправка формы
if(v) {
$.each($(this).find('input:checked'), function() {
this.value > 1 ? a = +this.value : p += +this.value
});
r.text((v * p + a).toFixed(2))
} else if(e.type=='submit') {
//нет выбора основных полей
alert('Нет выбора')
}
})
});
</script>
</head>
<body>
<form method="post" id="myform" autocomplete="off">
<table>
<tbody>
<tr>
<td>Сварка </td>
<td>7,5 р / см</td>
<td><input factor="7.5" type="number" min="0"/></td>
</tr>
<tr>
<td>Рез, зачистка реза, сборка</td>
<td>32 р / шт</td>
<td><input factor="32" type="number" min="0"/></td>
<tr>
<td>Зачистка шва</td>
<td>2 р / см</td>
<td><input factor="2" type="number" min="0"/></td>
</tr>
<tr>
<td>Покраска, обезжиривание, грунт (лист)</td>
<td>230 р / м.кв</td>
<td><input factor="230" type="number" min="0"/></td>
</tr>
<tr>
<td>Покраска, обезжиривание, грунт (профиль)</td>
<td>30 р /м.п</td>
<td><input factor="30" type="number" min="0"/></td>
</tr>
<tr>
<td>шпаклевка шва</td>
<td>15 р / шт</td>
<td><input factor="15" type="number" min="0"/></td>
</tr>
<tr>
<td>шлифовка шва </td>
<td>36 р / шт</td>
<td><input factor="36" type="number" min="0"/></td>
</tr>
<tr>
<td>Монтаж на объекте</td>
<td>20%</td>
<td><input value="0.2" type="checkbox"></td>
</tr>
<tr>
<td>Дизайн</td>
<td>30%</td>
<td><input value="0.3" type="checkbox"></td>
</tr>
<tr>
<td>Выезд замерщика</td>
<td>800р </td>
<td><input value="800" type="checkbox"></td>
</tr>
<tr>
<td>Итого</td>
<td id="r"></td>
</tr>
</tbody>
</table>
<button>Отправить</button>
</form>
</body>
</html>
Последний раз редактировалось laimas, 10.04.2017 в 03:15.
|
|
10.04.2017, 11:54
|
|
Интересующийся
|
|
Регистрация: 08.04.2017
Сообщений: 11
|
|
|
спасибо большое !! буду еще читать изучать приемы , ну смысл потихоньку улавливаю ! учту ваши справедливые замечание ! спасибо большое !!
|
|
|
|
