Javascript-форум - Калькулятор с 2мя ползунками

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Калькулятор с 2мя ползунками (https://javascript.ru/forum/jquery/64419-kalkulyator-s-2mya-polzunkami.html)

Калькулятор с 2мя ползунками

Снова приветствую всех ГУРУ явы)

На сей раз задачку решил понагляднее изъяснить, дабы снова не пришлось 100раз с 0 переписывать все :)
В общем вот как оно должно выглядеть:

Теперь собсно как оно должно считаться
X= (выбранному радио х1,х2 или х3), где X1=30, X2=50, X3=100
Y= POLZUN2*900
Z = OPTION1*1800
W = OPTION2*10

ITOGO=POLZUN1*X + Y + Z + W

В общем задачка не из простых, надеюсь на понимание таких гуру как Рони :)))

Забыл еще дополнить зависимость POLZUN2 от POLZUN1, Каждые 100 единиц в POLZUN1 увеличивать стартовое значение в POLZUN2 на +1..

т.е. если в P1 выбрано меньше 100, то P2: от 1 до 6, если от 100 до 175, то P2: от 2 до 6, если от 200 до 275, P2 - от 3 до 6 Если 500 - от 6 до 6.

Учитывая мою криворукость я изуродую само понятие кода, попытаясь это все собрать в пучок :)

Собственно набросал верхушку, но попал тутже в тотальный ступор с радиобаттнами, не могу найти функцию, чтобы при checked'e "itnm" присваивалось соответствующее валуе выбранного радио...
Да и чувствую можно как-то укоротить это полотенце массивами (с ними у меня полный абзац), т.к. var price будет длинной до 500 с темже шагом (25), а это уже "Война и Мир"...

$(function() {
itnm = 40
var price = {
    50: {
        1: itnm*50+900*1,
        2: itnm*50+900*2,
        3: itnm*50+900*3,
        4: itnm*50+900*4,
        5: itnm*50+900*5,
        6: itnm*50+900*6,
    },
    75: {
        1: itnm*75+900*1,
        2: itnm*75+900*2,
        3: itnm*75+900*3,
        4: itnm*75+900*4,
        5: itnm*75+900*5,
        6: itnm*75+900*6,
    },
    100: {
        2: itnm*100+900*2,
        3: itnm*100+900*3,
        4: itnm*100+900*4,
        5: itnm*100+900*5,
        6: itnm*100+900*6,
    },
    125: {
        2: itnm*125+900*2,
        3: itnm*125+900*3,
        4: itnm*125+900*4,
        5: itnm*125+900*5,
        6: itnm*125+900*6,
    },
    150: {
        2: itnm*150+900*2,
        3: itnm*150+900*3,
        4: itnm*150+900*4,
        5: itnm*150+900*5,
        6: itnm*150+900*6,
    },
    175: {
        2: itnm*175+900*2,
        3: itnm*175+900*3,
        4: itnm*175+900*4,
        5: itnm*175+900*5,
        6: itnm*175+900*6,
    },
    200: {
        3: itnm*200+900*3,
        4: itnm*200+900*4,
        5: itnm*200+900*5,
        6: itnm*200+900*6,
    },
    225: {
        3: itnm*225+900*3,
        4: itnm*225+900*4,
        5: itnm*225+900*5,
        6: itnm*225+900*6,
    },
};

    function comb(a) {
        return Object.keys(a)
    }

    var steps = comb(price);
    var num = steps[0];
    var steps2 = comb(price[num]);

    $("#slider2").slider({
        value: 0,
        min: 0,
        max: steps2.length - 1,
        step: 1,
        slide: function(event, ui) {
            var Y = steps2[ui.value];
            $("#amount2").val(Y);
            $("#amount3").val(price[num][Y]);
        },
        change: function(event, ui) {
            var Y = steps2[ui.value];
            $("#amount2").val(Y);
            $("#amount3").val(price[num][Y]);
        }
    });
    $("#slider").slider({
        value: 0,
        min: 0,
        max: steps.length - 1,
        step: 1,
        slide: function(event, ui) {
            num = steps[ui.value];
            $("#amount").val(num);
            steps2 = comb(price[num]);
            $("#slider2").slider("option","max", steps2.length - 1);
            $("#slider2").slider("option", "value", 0)
        },
        change: function(event, ui) {
            num = steps[ui.value];
            $("#amount").val(num);
            steps2 = comb(price[num]);
            $("#slider2").slider("option","max", steps2.length - 1);
            $("#slider2").slider("option", "value", 0)
        }
    });
    $("#slider").slider("option", "value", 0)
});

body {
  font-family: sans-serif;
  font-size: 12px;
}

#amount, #amount2, #amount3 {
  font-size: 22px;
  font-weight: bold;
  border:none;
  color: #ff5555;
  background: none;

}
#slider, #slider2{
   width: 300px;
}
.radio {
display: inline;
}

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js">
</script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<p class="radio"><input type="radio" name="xradio" value="40" checked>RADIO1</p><p class="radio"><input type="radio" name="xradio" value="50">RADIO2</p><p class="radio"><input type="radio" name="xradio" value="100">RADIO3</p>
<p>
  <input type="text" id="amount" readonly>
</p>

<div id="slider"></div>

<p>
  <input type="text" id="amount2" readonly>
</p>

<div id="slider2"></div>
<p>
  <input type="text" id="amount3" readonly>
</p>
</body>

Собсно на жсбин впилил: http://jsbin.com/sawexujera/edit?html,css,js,output

Поможите люди добрыя! :)

fos,
а на картинке 4 ползунка?

ну они потом тупо +вать по аналогии с ползуном 2, без зависимости от чего либо.. тупо передвинул + к сумме, там нужно додумать как их еще смысловой нагрузкой скрывать лучше они типа как опциональные... в общем по мере поступления проблемы, а то я нахрен позапутаюсь :))))

slider калькулятор

fos,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body {
  font-family: sans-serif;
  font-size: 12px;
}

.amount{
  font-size: 22px;
  font-weight: bold;
  border:none;
  color: #ff5555;
  background: none;

}
.slider{
   width: 300px;
   margin: 20px;
}
.radio {
display: inline;
}
.opt [type="checkbox"] + *{
   display: none;
}
.opt :checked + *{
  display:  block;
}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <script>
$(function() {
    var data = [
        [50, 500, 25],
        [1, 6, 1],
        [0, 6, 1],
        [0, 500, 5]
    ];

    function out() {
        var x = $('[name="xradio"]:checked').index('[name="xradio"]') || 0;
        x = [30, 50, 100][x];
        var p = $(".opt .amount");
        var p1 = +p[0].value;
        var min = 1;
        if (p1 > 100 && p1 < 175) min = 2;
        /*  */
        $(".slider").eq(1).slider("option", {
            "value": Math.max(p[1].value, min),
            "min": min
        });
        var y = p[1].value * 900;
        var z = p[2].value * 1800;
        var w = p[3].value * 10;
        $(".res").html(p1 * x + y + z + w)
    }
    $(".opt").each(function(i, el) {
        var d = data[i],
            am = $(".amount", el),
            sl = $(".slider", el),
            c = $('[type="checkbox"]',
                el);
        sl.slider({
            min: d[0],
            max: d[1],
            step: d[2],
            slide: function(event, ui) {
                am.val(ui.value)
            },
            change: function(event, ui) {
                am.val(ui.value)
            },
            stop: out
        });
        sl.slider("option", "value", d[0]);
        if (c.length) c.on("click", function() {
            !this.checked && sl.slider("option", "value", 0);
            out()
        })
    });
    $('[name="xradio"]').on("click", out)
});
  </script>
</head>

<body>

<div class="radio">
<label><input type="radio" name="xradio" value="40" checked>RADIO1</label>
<label><input type="radio" name="xradio" value="50">RADIO2</label>
<label><input type="radio" name="xradio" value="100">RADIO3</label></div>


<div class="opt">
  <div class="slider"></div>
  <input type="text" class="amount" readonly>
</div>

<div class="opt">
  <div class="slider"></div>
  <input type="text" class="amount" readonly>
</div>

<div class="opt">
  <input type="checkbox" >
  <div class="slider"></div>
  <input type="text" class="amount" readonly>
</div>

<div class="opt">
  <input type="checkbox" >
  <div class="slider"></div>
  <input type="text" class="amount" readonly>
</div>

<div class="res">0</div>
</body>
</html>

с css позже тогда помучаюсь, как это лучше визуализировать, а по механике вот:

body {
  font-family: sans-serif;
  font-size: 12px;
}

#amount, #amount2, #amount3, #amount4, #amount5 {
  font-size: 22px;
  font-weight: bold;
  border:none;
  color: #ff5555;
  background: none;

}
#slider, #slider2, #slider3, #slider4 {
   width: 300px;
}
.radio {
display: inline;
}

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js">
</script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<p class="radio"><input type="radio" name="xradio" value="40" checked>RADIO1</p><p class="radio"><input type="radio" name="xradio" value="50">RADIO2</p><p class="radio"><input type="radio" name="xradio" value="100">RADIO3</p>
<p>
  <input type="text" id="amount" readonly>
</p>

<div id="slider"></div>

<p>
  <input type="text" id="amount2" readonly>
</p>

<div id="slider2"></div>
<p>
  <input type="text" id="amount4" value="0" readonly>
</p>

<div id="slider3"></div>

<p>
  <input type="text" id="amount5" value="0" readonly>
</p>

<div id="slider4"></div>
<p>
  <input type="text" id="amount3" readonly>
</p>
</body>

$(function() {
itnm = 40
var price = {
    50: {
        1: itnm*50+900*1,
        2: itnm*50+900*2,
        3: itnm*50+900*3,
        4: itnm*50+900*4,
        5: itnm*50+900*5,
        6: itnm*50+900*6,
    },
    75: {
        1: itnm*75+900*1,
        2: itnm*75+900*2,
        3: itnm*75+900*3,
        4: itnm*75+900*4,
        5: itnm*75+900*5,
        6: itnm*75+900*6,
    },
    100: {
        2: itnm*100+900*2,
        3: itnm*100+900*3,
        4: itnm*100+900*4,
        5: itnm*100+900*5,
        6: itnm*100+900*6,
    },
    125: {
        2: itnm*125+900*2,
        3: itnm*125+900*3,
        4: itnm*125+900*4,
        5: itnm*125+900*5,
        6: itnm*125+900*6,
    },
    150: {
        2: itnm*150+900*2,
        3: itnm*150+900*3,
        4: itnm*150+900*4,
        5: itnm*150+900*5,
        6: itnm*150+900*6,
    },
    175: {
        2: itnm*175+900*2,
        3: itnm*175+900*3,
        4: itnm*175+900*4,
        5: itnm*175+900*5,
        6: itnm*175+900*6,
    },
    200: {
        3: itnm*200+900*3,
        4: itnm*200+900*4,
        5: itnm*200+900*5,
        6: itnm*200+900*6,
    },
    225: {
        3: itnm*225+900*3,
        4: itnm*225+900*4,
        5: itnm*225+900*5,
        6: itnm*225+900*6,
    },
};

    function comb(a) {
        return Object.keys(a)
    }

    var steps = comb(price);
    var num = steps[0];
    var steps2 = comb(price[num]);
    $("#slider2").slider({
        value: 0,
        min: 0,
        max: steps2.length - 1,
        step: 1,
        slide: function(event, ui) {
            var Y = steps2[ui.value];
            $("#amount2").val(Y);
            $("#amount3").val(price[num][Y]);
        },
        change: function(event, ui) {
            var Y = steps2[ui.value];
            $("#amount2").val(Y);
            $("#amount3").val(price[num][Y]);
        }
    });
    $("#slider").slider({
        value: 0,
        min: 0,
        max: steps.length - 1,
        step: 1,
        slide: function(event, ui) {
            num = steps[ui.value];
            $("#amount").val(num);
            steps2 = comb(price[num]);
            $("#slider2").slider("option","max", steps2.length - 1);
            $("#slider2").slider("option", "value", 0)
        },
        change: function(event, ui) {
            num = steps[ui.value];
            $("#amount").val(num);
            steps2 = comb(price[num]);
            $("#slider2").slider("option","max", steps2.length - 1);
            $("#slider2").slider("option", "value", 0)
        }
    });
    $("#slider3").slider({
     value: 0,
     min: 0,
     max: 6, 
     step: 1,
     slide: function( event, ui ) {
     $( "#amount4" ).val( ui.value );
     },
     change: function(event, ui) {
     $( "#amount4" ).val( ui.value );
     }
    });
     $("#slider4").slider({
     value: 0,
     min: 0,
     max: 350, 
     step: 5,
     slide: function( event, ui ) {
     $( "#amount5" ).val( ui.value );
     },
     change: function(event, ui) {
     $( "#amount5" ).val( ui.value );
     }
    });
    $("#slider").slider("option", "value", 0)
});

Тут у меня сразу ступор с прибавкой к сумме по результатам 1 и 2го ползуна... В общем к amount3 нужно + amount4*1800 и + amount5*10.. часа 3 уже колдую хреновня какаят нерабочая получается да и только =\

запилил в джсбин: http://jsbin.com/ziwoqilula/edit?html,css,js,output

Цитата:

Сообщение от рони (Сообщение 425068)

fos,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body {
  font-family: sans-serif;
  font-size: 12px;
}

.amount{
  font-size: 22px;
  font-weight: bold;
  border:none;
  color: #ff5555;
  background: none;

}
.slider{
   width: 300px;
   margin: 20px;
}
.radio {
display: inline;
}
.opt [type="checkbox"] + *{
   display: none;
}
.opt :checked + *{
  display:  block;
}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <script>
$(function() {
    var data = [
        [50, 500, 25],
        [1, 6, 1],
        [0, 6, 1],
        [0, 500, 5]
    ];

    function out() {
        var x = $('[name="xradio"]:checked').index('[name="xradio"]') || 0;
        x = [30, 50, 100][x];
        var p = $(".opt .amount");
        var p1 = +p[0].value;
        var min = 1;
        if (p1 > 100 && p1 < 175) min = 2;
        /*  */
        $(".slider").eq(1).slider("option", {
            "value": Math.max(p[1].value, min),
            "min": min
        });
        var y = p[1].value * 900;
        var z = p[2].value * 1800;
        var w = p[3].value * 10;
        $(".res").html(p1 * x + y + z + w)
    }
    $(".opt").each(function(i, el) {
        var d = data[i],
            am = $(".amount", el),
            sl = $(".slider", el),
            c = $('[type="checkbox"]',
                el);
        sl.slider({
            min: d[0],
            max: d[1],
            step: d[2],
            slide: function(event, ui) {
                am.val(ui.value)
            },
            change: function(event, ui) {
                am.val(ui.value)
            },
            stop: out
        });
        sl.slider("option", "value", d[0]);
        if (c.length) c.on("click", function() {
            !this.checked && sl.slider("option", "value", 0);
            out()
        })
    });
    $('[name="xradio"]').on("click", out)
});
  </script>
</head>

<body>

<div class="radio">
<label><input type="radio" name="xradio" value="40" checked>RADIO1</label>
<label><input type="radio" name="xradio" value="50">RADIO2</label>
<label><input type="radio" name="xradio" value="100">RADIO3</label></div>


<div class="opt">
  <div class="slider"></div>
  <input type="text" class="amount" readonly>
</div>

<div class="opt">
  <div class="slider"></div>
  <input type="text" class="amount" readonly>
</div>

<div class="opt">
  <input type="checkbox" >
  <div class="slider"></div>
  <input type="text" class="amount" readonly>
</div>

<div class="opt">
  <input type="checkbox" >
  <div class="slider"></div>
  <input type="text" class="amount" readonly>
</div>

<div class="res">0</div>
</body>
</html>

ЕПТЫЖИТОПТЫЖИ))))))

Ща обмозгую...

Рони, я уже не раз говорил - Вы гений) Одно только "вывалилось" из алгаритма) зависимость 2го ползуна от 1го.. это основной момент.. т.к. в 1м считается колво, а во 2м часы затраченные... и за час более 100 единиц невтоптать :(, а так сделано прям вот точьвточь как я хотел, даже с обнулением при скрытии на чекбокс! вот прям из мозга весь алгаритм рассмотрели!:))))))

Цитата:

Сообщение от fos

Одно только "вывалилось" из алгаритма) зависимость 2го

всё там есть как вы описали строка 53 для примера