var ah = {
40: 8,
45: 10,
50: 11,
55: 12,
60: 14,
65: 15,
70: 16,
75: 16,
85: 17,
90: 18,
95: 19,
100: 20,
110: 21,
120: 25,
132: 30,
140: 32,
190: 42,
200: 44,
210: 46,
220: 48,
230: 50,
}
$(document).ready(function() {
function calcTotal() {
$('#res1').html('');
var op = $("#select-ah").val();
var op1 = +ah[op];
var v = +$("#val1").val();
var total = op1 * v;
var total2 = op1 * 0 * v;
var sbros = $(#reset1).click(function(){
return total2;
};
//console.log(op, op1, v, total);
if (!isNaN(total)) {
$('#res1').append($("<span></span>").text(total))
}
else if (sbros) {
$('#res1').append($("<span></span>").text(sbros))
}
else {
$('#res1').html('<span>Результат</span>');
};
$('#minus').click(function() {
var $input = $(this).parent().find('input');
var count = +$input.val();
if (isNaN(count))
count = 0;
count--;
count = count < 1 ? 1 : count;
$input.val(count);
$input.change();
});
$('#plus').click(function() {
var $input = $(this).parent().find('input');
var count = +$input.val();
if (isNaN(count))
count = 0;
count++;
$input.val(count);
$input.change();
});
Object.keys(ah).forEach((item) => {
$('#select-ah').append('<option value="' + item + '">' + item + '</option>');
});
$('#select-ah').change(calcTotal);
$(".block__val input").change(calcTotal);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select-ah">
<option>Выберите емкость (A/ч)</option>
</select>
</div>
<div class="block__val" style="display:flex;justify-content: center;width:35%;">
<span class="btn-btn1" id="minus">-</span>
<input type="text" value="1" style="text-align: center;border-radius: 0px;" id="val1">
<span class="btn-btn1" id="plus">+</span>
</div>
</div>
<div class="price-itog">
<p style="margin-top: 47px; color:#2E0648;">Стоимость: <span id="res1"></span></p>
</div>
Длинный комментарий был бы, решил в виде ответа записать.
• $(document)
документ в таком виде пишется без кавычек. А все селекторы классов и id обязательно должны быть с кавычками $('#reset1')
• Запись такого вида:
$('#reset1').click();
(а кстати, click() разве не убрали из последних версий jQ?) привязывает событие к элементу, который уже оказался на странице после загрузки. Он не будет работать, если элемент id="reset1"
создается динамически. Поэтому там-сям так часто рекомендуют привыкать к записи такого вида:
$(document).on('click', '#reset1', function(){ ... });
В таком случае клик привязывается к документу. И при клике идет проверка, если у кликнутого элемента оказывается id="reset1", запускается функция.
• append()
в целом достаточно "тяжелая" штука... к редактированию HTML страницы стоит прибегать только при реальной необходимости. А .html()
или innerHTML
- "тяжелее" (сперва смотрят на всё написанное, делают хитрую магию, а если там оказываются HTML элементы, через append добавляют элементы куда надо)
В вашем случае оптимальнее будет изначально держать на странице весь HTML, только всему, что должно быть изначально скрыто, добавить класс такого вида:
<style> .INVIS {display: none;} </style>
<div class="INVIS" id="reset1"> Меня не видно </div>
При необходимости, через jQuery уже можно переключать эту видимость:
Показать — $('#reset1').show();
или скрыть: $('#reset1').hide();
• Проверку isNaN можно вовсе исключить, если вашим инпутам добавить type="number"
Тогда туда в принципе нельзя будет ничего ввести кроме чисел.
А не забывайте перед математическими операциями убедиться, что полученное число является именно числом (Number), а не строкой (String). Такая запись превращает строку в число:
var x = Number( $('#например').val() );
Не удержался, записал с нуля))
//Чтобы лишний раз не проверять на NaN, поместил строку "выберите"
// сразу в объект, со значением 0 (будет 0, а не NaN)
var ah = {
'Выберите емкость (А/ч)': 0,
40: 8,
45: 10,
50: 11,
55: 12,
60: 14,
65: 15,
70: 16,
75: 16,
85: 17,
90: 18,
95: 19,
100: 20,
110: 21,
120: 25,
132: 30,
140: 32,
190: 42,
200: 44,
210: 46,
220: 48,
230: 50
}
//Здесь вы лишний раз записывали ничегонеделающий value="item".
Object.keys(ah).forEach((item) => {
$('#select-ah').append('<option>' + item + '</option>');
});
$('#select-ah').val('Выберите емкость (А/ч)');
//Один раз записываем универсальную функцию-считалку и всё, вызываем её куда надо.
function count(){
var index = $('#select-ah').val();
var op = +ah[index];
$('#res1').text( op*($('#val1').val()) );
}
//при вводе в инпут...
$(document).on('input','#val1',function(){ count(); });
//при смене значения селекта...
$(document).on('change','#select-ah',function(){ count(); });
//при клике на +1 (сперва меняем значение, потом вызываем считалку)
$(document).on('click','#plus',function(){
$('#val1').val( Number($('#val1').val()) + 1 ); count();
});
//при клике на -1
$(document).on('click','#minus',function(){
var num = $('#val1').val() == 1 ? 0 : 1;
$('#val1').val( Number($('#val1').val()) - num ); count();
});
//здесь ? называется "тернарный оператор" и является "коротким" if
//Общий вид: «Условие ? Значение при выполнении : Значение в других случаях»
//Проверяем, если значение инпута и так равно 1, от него делаем минус 0
//Иначе, минус 1
//Самый банальный сброс
$(document).on('click','#reset',function(){
$('#val1').val(1);
$('#res1').text(""); //Пустая строка
$('#select-ah').val('Выберите емкость (А/ч)');
});
input{width: 80px; text-align:center;font-size:30px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Это плохой HTML. На скорую руку просто всегда оставляю только основные элементы.
А когда скрипт готов, потом уже можно заняться внешним видом -->
<select id="select-ah"></select>
<br><br>
<button id="minus">-</button>
<input type="number" value="1" id="val1">
<button id="plus">+</button>
<br><br>
Стоимость: <span id="res1"></span>
<br><br>
<button id="reset">reset</button>
Если страница очень большая, с километровым JS, надо избегать глобальных переменных, чтобы например в случае совпадения названий переменных, одно не переписывало значение другого. Этому немного помогают const и let вместо var... но чтобы совсем надежно, можно прям весь написанный код пихнуть в $(document).ready(function(){...});
Но в данном случае jQ длиннее чем JS)
На чистом JS функцию надо будет поставить в левую сиську ( )( );
(function(){ сюда весь код... это эквивалент $ready })();
Частный дом престарелых в Киеве: комфорт, забота и профессиональный уход
Блок обновлен, прошло более 2 дней с момент последнего клика по facebookПример, страницы https://news
Хотите улучшить этот вопрос? Переформулируйте вопрос, чтобы на него можно было дать ответ, основанный на фактах и цитатах, отредактировав...
Есть класс App, в методе render я вставляю компонент Proposal:
Как принято рисовать архитектуру для приложений React, или хотя бы JS? Нужен какой-нибудь простой гайд, для начинающих