Jquery how to reset prices

Question

Everything is ready in pritsippe, only I don’t know how to reset the prices (because they are all different) and remove the checkboxes, save the good people. fresh-diet.ru/img/social/calc

There are pictures from there I take prices

<a class="img_minimum"><img src="img/2000х2200.png" price="8300"></a> <a class="img_minimum"><img src="img/2100х1400-1.png" price="12300"></a> <a class="img_minimum"><img src="img/2100х1400-2.png" price="0"></a>

There are checkboxes from there, well, I'm sorry I have to take value

 <label><input type="checkbox" name="dop" value="240" placeholder="Отлив" class="radio_choose1">Отлив</label> <label><input type="checkbox" name="dop" value="480" placeholder="Подоконник" class="radio_choose2">Подоконник</label> <label><input type="checkbox" name="dop" value="2600" placeholder="Откосы" class="radio_choose3">Откосы</label> <label><input type="checkbox" name="dop" value="2000" placeholder="Монтаж" class="radio_choose4">Монтаж</label>

Well, actually all the salt in jquery

 $(document).ready(function() { // вся мaгия пoсле зaгрузки стрaницы price = 0; dopolneniya = 0; ///прозраяные кнопки до выбора картинки $("input").css('opacity', '0.2'); $(".img_minimum img").click(function(event) { //выбрали картинку, получаем значения value //кнопки в нормале $("input").css('opacity', '1.4'); //задаем активную картинку $(".img_minimum img").css({'background':'#ffffff','border': '2px solid #c2c2c2'}); $(this).css({'background':'#ebebeb','border': '2px solid green'}); //выводим ее вместо большой главной картинки img_name = $(this).attr('src'); $(".big_img img").attr('src', img_name); //вытаскиваем цену тег картинки price img_price = $(this).attr('price'); price = parseInt(img_price); //var inputs = $(".dopolneniya input"); var summ = 0; $(".one").text(price + " руб"); with_complect = parseInt($(".all2").text()); $(".all").text(price + with_complect + " руб"); if (price == 7900) { //alert("this is 3"); $(".radio_choose1").removeAttr('value'); $(".radio_choose1").attr('value', '380'); $(".radio_choose2").removeAttr('value'); $(".radio_choose2").attr('value', '700'); $(".radio_choose3").removeAttr('value'); $(".radio_choose3").attr('value', '3000'); $(".radio_choose4").removeAttr('value'); $(".radio_choose4").attr('value', '3200'); with_complect = 0; summ = 0; changeElement(); getSum(); } else if(price == 9600){ //alert("this is 4"); $(".radio_choose1").removeAttr('value'); $(".radio_choose1").attr('value', '380'); $(".radio_choose2").removeAttr('value'); $(".radio_choose2").attr('value', '700'); $(".radio_choose3").removeAttr('value'); $(".radio_choose3").attr('value', '3000'); $(".radio_choose4").removeAttr('value'); $(".radio_choose4").attr('value', '3200'); summ = price; changeElement(); getSum(); } else if(price == 8300){ //alert("this is 5"); $(".radio_choose1").removeAttr('value'); $(".radio_choose1").attr('value', '380'); $(".radio_choose2").removeAttr('value'); $(".radio_choose2").attr('value', '700'); $(".radio_choose3").removeAttr('value'); $(".radio_choose3").attr('value', '3000'); $(".radio_choose4").removeAttr('value'); $(".radio_choose4").attr('value', '3200'); summ = price; changeElement(); getSum(); } else if(price == 12300){ //alert("this is 6"); $(".radio_choose1").removeAttr('value'); $(".radio_choose1").attr('value', '240'); $(".radio_choose2").removeAttr('value'); $(".radio_choose2").attr('value', '400'); $(".radio_choose3").removeAttr('value'); $(".radio_choose3").attr('value', '4000'); $(".radio_choose4").removeAttr('value'); $(".radio_choose4").attr('value', '3200'); summ = price; changeElement(); getSum(); }else if(price == 0){ //alert("this is 7"); $(".radio_choose1").removeAttr('value'); $(".radio_choose1").attr('value', '380'); $(".radio_choose2").removeAttr('value'); $(".radio_choose2").attr('value', '250'); $(".radio_choose3").removeAttr('value'); $(".radio_choose3").attr('value', '3000'); $(".radio_choose4").removeAttr('value'); $(".radio_choose4").attr('value', '4100'); summ = price; changeElement(); getSum(); } else if(price == 5600){ //alert("this is 1"); $(".radio_choose1").removeAttr('value'); $(".radio_choose1").attr('value', '240'); $(".radio_choose2").removeAttr('value'); $(".radio_choose2").attr('value', '480'); $(".radio_choose3").removeAttr('value'); $(".radio_choose3").attr('value', '2600'); $(".radio_choose4").removeAttr('value'); $(".radio_choose4").attr('value', '2000'); summ = price; changeElement(); getSum(); } else if(price == 7200){ //alert("this is 2"); $(".radio_choose1").removeAttr('value'); $(".radio_choose1").attr('value', '240'); $(".radio_choose2").removeAttr('value'); $(".radio_choose2").attr('value', '480'); $(".radio_choose3").removeAttr('value'); $(".radio_choose3").attr('value', '2600'); $(".radio_choose4").removeAttr('value'); $(".radio_choose4").attr('value', '2000'); summ = price; changeElement(); getSum(); } }); $(function changeElement(){ $(".dopolneniya input[type=checkbox]").change(function(){ summa = getSum(); $(".all2").html(summa); with_complect = parseInt($(".all2").text()); $(".all").text(price + with_complect + " руб"); }); }); function getSum(){ inputs = $(".dopolneniya input"); summ = 0; for(var i = 0; i < inputs.length; i++){ if($(inputs[i]).prop("checked")) summ += +$(inputs[i]).val(); } // for i return summ; } // getSum });

You have a window that immediately determines all the parameters in fact: the price of the window, and the price of each option that are selected.
The easiest way is to add all 5 numbers at once (window price + 4 options for this window) into the window itself, that is, into the img tag, in the form of attributes, for example.
And download every time from there when you click all prices
God forbid the number will change, and it will be necessary to correct the code.
Everything is nothing, but the opacity property - the opacity is set between zero (0%) and one (100%).

Quazimorda quazimorda 136 eight · Answer 1 · 2018-04-25T13:59:54

and remove checkboxes

Where data is sent to the application, for example, write this:

 $(':checkbox').attr('checked': false);

Answer 2 · 2018-04-25T14:02:14

When you click on img, you need to check that this is another img, not the current one The easiest way is to keep track of the current using a class (you have CSS attached directly, put this CSS in a class, for example selected )

 //задаем активную картинку $(".img_minimum img").css({'background':'#ffffff','border': '2px solid #c2c2c2'}); $(this).css({'background':'#ebebeb','border': '2px solid green'});

will turn into

 if ($(this).hasClass("selected")) return; // не надо повторных выборов окна $(".img_minimum img").removeClass("selected"); $(this).addClass("selected");

Now we deal with zeroing. When another window is selected, you need to uncheck the boxes and recalculate the amount. It would be convenient if the recalculation of the sum was done in a function. You have a syntax error when announcing / registering the conversion function, look in the browser console.

It would be correct (in the root of the script, not inside some {} ):

 // Функция для пересчета суммы function changeElement(){ summa = getSum(); $(".all2").html(summa); with_complect = parseInt($(".all2").text()); $(".all").text(price + with_complect + " руб"); } // Регистрация обработчика смены состояния флажка $(function(){ $(".dopolneniya input[type=checkbox]").change(changeElement); }); // Не забываем про функцию getSum(), которую используем в changeElement() function getSum(){ inputs = $(".dopolneniya input"); summ = 0; for(var i = 0; i < inputs.length; i++){ if($(inputs[i]).prop("checked")) summ += +$(inputs[i]).val(); } // for i return summ; } // getSum

No need to wrap the declarations of the functions getSum() and changeElement() inside a call to jQuery $(...); , it hides them inside the jQuery.ready () handler function scope, which is most likely not what you wanted to do.

Now you can make a normal removal of flags and recalculate the amount. We do a click on the img in the same event, after dropping in prices for each option:

 // Снимаем галки $(".dopolneniya input[type=checkbox]").prop("checked", false); // Пересчитываем сумму changeElement();

Although I would not remove the checkbox in your place. People chose another window, and the options are likely to remain the same. Just do the recalculation, and do not touch the flags.

And yet, .removeAttr('value'); obviously superfluous, after it there is an installation of this attribute at once. Why so hard?

Thank you, but the problem is that the amount is different again, choosing the last window.
This is a numerical problem, not a technical one, I can advise checking the numbers, or update the question with the full code + description of what should be.
If your calculator counts with an error of 2000 rubles, but the checkboxes are set correctly and everything works - a question for the numbers, not for the code.

avantyurist avantyurist one 2 · Answer 3 · 2018-04-28T07:36:42

Thank you for your help! Honestly from the heart. Revealed the error "A lot of extra code" deleted and helped a senior programmer. By the recalculation decision, it became to call the function where it is actually called.

  $(".radio_choose2").val('480'); $(".radio_choose3").val('2600'); $(".radio_choose4").val('2000'); summ = price; } changeElement();

Jquery how to reset prices

3 answers 3

More articles: