Jquery как обнулить цены

203

27 апреля 2018, 12:17

В приницпе всё готово, вот только я незнаю как обнулить цены (ибо они все разные) и снять чекбоксы, спасите люди добрые. fresh-diet.ru/img/social/calc

Есть картинки оттуда я беру цены

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

Есть чекбоксы оттуда ну уж простите приходится брать 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>

ну и собственно вся соль в 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
});

Answer 1

и снять чекбоксы

Там, где отправляются данные на заявку, например, написать так:

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

Answer 2

Когда происходит клик на img, нужно проверить, что это другой img, не текущий. Проще всего отслеживать текущий с помощью класса (у вас вешается CSS напрямую, положите этот CSS в класс, например selected)

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

превратится в

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

Теперь разбираемся с обнулением. Когда выбрано другое окно, нужно снять флажки и пересчитать сумму. Было бы удобно, если пересчет суммы делался в функции. У вас ошибка синтаксиса при объявлении/регистрации функции пересчета, посмотрите в консоль браузера.

Правильно было бы так (в корне скрипта, не внутри каких-то {}):

// Функция для пересчета суммы
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

Не надо заворачивать объявления функций getSum() и changeElement() внутрь вызова jQuery $(...);, это прячет их внутрь области видимости функции-обработчика jQuery.ready(), скорее всего это не то, что вы хотели сделать

Теперь можно сделать нормальное снятие флажков и пересчет суммы. Делаем в том же событии клика на img, после вбивки цен на каждую опцию:

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

Хотя я бы на вашем месте не стал снимать флажки. Люди выбрали другое окно, а опции скорее всего останутся те же. Просто делайте пересчет, а флажки не трогайте.

И еще, .removeAttr('value'); явно лишнее, после него сразу же идет установка этого атрибута. Зачем так сложно?