09.02.2017, 22:56
|
|
Интересующийся
|
|
Регистрация: 09.02.2017
Сообщений: 10
|
|
Сообщение от рони
|
Alena-stav,
общая сумма нужна или что?
|
Нет, например, есть слайдер1 со списком ширины (500, 600, 700, и т.д.);
и слайдер2 со списком высоты (500, 600, 700, и т.д.);
При выборе ширины и высоты, чтобы результат цены выводил тот, который соответствует этим размерам. Этот результат не считается, он задан, например, ширина 500 и высота 600 = 2000, ширина 500 и высота 700 = 2100 и т.д.
var price = {
500: {
500: 1000,
600: 2000,
700: 2100
},
600: {
500: 2000,
600: 2050,
700: 2200
}
}; |
|
09.02.2017, 23:13
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
Alena-stav,
<!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 = [
[500, 600, 100],
[500, 700, 100]
];
var price = {
500: {
500: 1000,
600: 2000,
700: 2100
},
600: {
500: 2000,
600: 2050,
700: 2200
}
};
function out() {
var p = $(".opt .amount").get();
var width = p[0].value;
var height = p[1].value;
var res = price[width] && price[width][height] || "уточните цену у консультанта";
$(".res").html(res)
}
$(".opt").each(function(i, el) {
var d = data[i],
am = $(".amount", el),
sl =
$(".slider", el);
sl.slider({
min: d[0],
max: d[1],
step: d[2],
slide: function(event, ui) {
am.val(ui.value);
out()
},
change: function(event, ui) {
am.val(ui.value);
out()
},
stop: out
});
sl.slider("option", "value", d[0])
})
});
</script>
</head>
<body>
<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="res">0</div>
</body>
</html>
|
|
09.02.2017, 23:16
|
|
Интересующийся
|
|
Регистрация: 09.02.2017
Сообщений: 10
|
|
|
Спасибо, Рони. То, что нужно!
|
|
10.02.2017, 01:13
|
|
Интересующийся
|
|
Регистрация: 09.02.2017
Сообщений: 10
|
|
Рони, возможно прибавлять к итоговому значению процент от него? Сейчас получается прибавлять константу (2), а мне нужно при выборе checkbox прибавить например 13%.
<!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{
margin: 30px 0;
}
.opt [type="checkbox"] + label ~ *{
display: none;
}
.opt :checked + label ~ *{
display: block;
}
.opt3 [type="checkbox"] + label ~ *{
display: none;
}
.opt3 :checked + label ~ *{
display: block;
}
/* Cначала обозначаем стили для IE8 и более старых версий
т.е. здесь мы немного облагораживаем стандартный чекбокс. */
.checkbox {
vertical-align: top;
margin: 0 3px 0 0;
width: 17px;
height: 17px;
}
/* Это для всех браузеров, кроме совсем старых, которые не поддерживают
селекторы с плюсом. Показываем, что label кликабелен. */
.checkbox + label {
cursor: pointer;
}
/* Далее идет оформление чекбокса в современных браузерах, а также IE9 и выше.
Благодаря тому, что старые браузеры не поддерживают селекторы :not и :checked,
в них все нижеследующие стили не сработают. */
/* Прячем оригинальный чекбокс. */
.checkbox:not(checked) {
position: absolute;
opacity: 0;
}
.checkbox:not(checked) + label {
position: relative; /* будем позиционировать псевдочекбокс относительно label */
padding: 0 0 0 60px; /* оставляем слева от label место под псевдочекбокс */
}
/* Оформление первой части чекбокса в выключенном состоянии (фон). */
.checkbox:not(checked) + label:before {
content: '';
position: absolute;
top: -4px;
left: 0;
width: 50px;
height: 26px;
border-radius: 13px;
background: #CDD1DA;
box-shadow: inset 0 2px 3px rgba(0,0,0,.2);
}
/* Оформление второй части чекбокса в выключенном состоянии (переключатель). */
.checkbox:not(checked) + label:after {
content: '';
position: absolute;
top: -2px;
left: 2px;
width: 22px;
height: 22px;
border-radius: 10px;
background: #FFF;
box-shadow: 0 2px 5px rgba(0,0,0,.3);
transition: all .2s; /* анимация, чтобы чекбокс переключался плавно */
}
/* Меняем фон чекбокса, когда он включен. */
.checkbox:checked + label:before {
background: #9FD468;
}
/* Сдвигаем переключатель чекбокса, когда он включен. */
.checkbox:checked + label:after {
left: 26px;
}
/* Показываем получение фокуса. */
.checkbox:focus + label:before {
box-shadow: 0 0 0 3px rgba(255,255,0,.5);
}
</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 = [
[500, 600, 100],
[500, 700, 100]
];
var price = {
500: {
500: 1000,
600: 2000,
700: 2100
},
600: {
500: 2000,
600: 2050,
700: 2200
}
};
function out() {
var p = $(".opt .amount").get();
var width = p[0].value;
var height = p[1].value;
var q = $('#checkbox3').is(":checked")? 2 : 0;
var res = price[width] && price[width][height] || "уточните цену у консультанта";
$(".res").html(res + q)
}
$(".opt").each(function(i, el) {
var d = data[i],
am = $(".amount", el),
sl =
$(".slider", el);
sl.slider({
min: d[0],
max: d[1],
step: d[2],
slide: function(event, ui) {
am.val(ui.value);
out()
},
change: function(event, ui) {
am.val(ui.value);
out()
},
stop: out
});
sl.slider("option", "value", d[0])
})
$('#checkbox3').on("click", out);
out()
});
</script>
</head>
<body>
<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="opt3">
<input type="checkbox" id="checkbox3" class="checkbox">
<label for="checkbox3">Я переключаю чекбокс</label>
</div>
<div class="res" style="padding-top: 50px;">0</div>
</body>
</html>
|
|
10.02.2017, 01:32
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
Сообщение от Alena-stav
|
|
а мне нужно при выборе checkbox прибавить например 13%.
|
function out() {
var p = $(".opt .amount").get();
var width = p[0].value;
var height = p[1].value;
var q = $('#checkbox3').is(":checked")? 1.13 : 1;
var res = price[width] && price[width][height] && (price[width][height]*q).toFixed(2) || "уточните цену у консультанта";
$(".res").html(res)
}
Последний раз редактировалось рони, 10.02.2017 в 01:36.
|
|
10.02.2017, 07:50
|
|
Интересующийся
|
|
Регистрация: 09.02.2017
Сообщений: 10
|
|
|
Спасибо большое!
|
|
08.05.2017, 09:54
|
|
Интересующийся
|
|
Регистрация: 09.02.2017
Сообщений: 10
|
|
<!DOCTYPE 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{
margin: 30px 0;
}
.opt [type="checkbox"] + label ~ *{
display: none;
}
.opt :checked + label ~ *{
display: block;
}
.opt3 [type="checkbox"] + label ~ *{
display: none;
}
.opt3 :checked + label ~ *{
display: block;
}
/* Cначала обозначаем стили для IE8 и более старых версий
т.е. здесь мы немного облагораживаем стандартный чекбокс. */
.checkbox {
vertical-align: top;
margin: 0 3px 0 0;
width: 17px;
height: 17px;
}
/* Это для всех браузеров, кроме совсем старых, которые не поддерживают
селекторы с плюсом. Показываем, что label кликабелен. */
.checkbox + label {
cursor: pointer;
}
/* Далее идет оформление чекбокса в современных браузерах, а также IE9 и выше.
Благодаря тому, что старые браузеры не поддерживают селекторы :not и :checked,
в них все нижеследующие стили не сработают. */
/* Прячем оригинальный чекбокс. */
.checkbox:not(checked) {
position: absolute;
opacity: 0;
}
.checkbox:not(checked) + label {
position: relative; /* будем позиционировать псевдочекбокс относительно label */
padding: 0 0 0 60px; /* оставляем слева от label место под псевдочекбокс */
}
/* Оформление первой части чекбокса в выключенном состоянии (фон). */
.checkbox:not(checked) + label:before {
content: '';
position: absolute;
top: -4px;
left: 0;
width: 50px;
height: 26px;
border-radius: 13px;
background: #CDD1DA;
box-shadow: inset 0 2px 3px rgba(0,0,0,.2);
}
/* Оформление второй части чекбокса в выключенном состоянии (переключатель). */
.checkbox:not(checked) + label:after {
content: '';
position: absolute;
top: -2px;
left: 2px;
width: 22px;
height: 22px;
border-radius: 10px;
background: #FFF;
box-shadow: 0 2px 5px rgba(0,0,0,.3);
transition: all .2s; /* анимация, чтобы чекбокс переключался плавно */
}
/* Меняем фон чекбокса, когда он включен. */
.checkbox:checked + label:before {
background: #9FD468;
}
/* Сдвигаем переключатель чекбокса, когда он включен. */
.checkbox:checked + label:after {
left: 26px;
}
/* Показываем получение фокуса. */
.checkbox:focus + label:before {
box-shadow: 0 0 0 3px rgba(255,255,0,.5);
}
</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 = [
[500, 600, 100],
[500, 700, 100]
];
var price = {
500: {
500: 1000,
600: 2000,
700: 2100
},
600: {
500: 2000,
600: 2050,
700: 2200
}
};
function out() {
var p = $(".opt .amount").get();
var width = p[0].value;
var height = p[1].value;
var q = $('#checkbox3').is(":checked")? 2 : 0;
var res = price[width] && price[width][height] || "уточните цену у консультанта";
$(".res").html(res + q)
}
$(".opt").each(function(i, el) {
var d = data[i],
am = $(".amount", el),
sl =
$(".slider", el);
sl.slider({
min: d[0],
max: d[1],
step: d[2],
slide: function(event, ui) {
am.val(ui.value);
out()
},
change: function(event, ui) {
am.val(ui.value);
out()
},
stop: out
});
sl.slider("option", "value", d[0])
})
$('#checkbox3').on("click", out);
out()
});
</script>
</head>
<body>
<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="opt3">
<input type="checkbox" id="checkbox3" class="checkbox">
<label for="checkbox3">Я переключаю чекбокс</label>
</div>
<input name="quantity" type="number" min="1" max='3' value="1"/> шт. <br>
<input id="okno" name="totalprice" type="text" readonly value="1000"/> руб.
<script>
$('input[name=quantity]').on('change keyup',function(){
var q = $('input[name=quantity]').val();
var total = q*1000;
$('input[name=totalprice]').attr('value', total);
});
</script>
<div class="res" style="padding-top: 50px;">0</div>
</body>
Уважаемый, Рони. Прошу вашей помощи. Пытаюсь добавить подсчет в общую сумму инпут с изменяющимся количеством и суммой. Подскажите, я на правильном пути?
|
|
08.05.2017, 10:33
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
Alena-stav,
возможно вы хотели так ...
<!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{
margin: 30px 0;
}
.opt [type="checkbox"] + label ~ *{
display: none;
}
.opt :checked + label ~ *{
display: block;
}
.opt3 [type="checkbox"] + label ~ *{
display: none;
}
.opt3 :checked + label ~ *{
display: block;
}
/* Cначала обозначаем стили для IE8 и более старых версий
т.е. здесь мы немного облагораживаем стандартный чекбокс. */
.checkbox {
vertical-align: top;
margin: 0 3px 0 0;
width: 17px;
height: 17px;
}
/* Это для всех браузеров, кроме совсем старых, которые не поддерживают
селекторы с плюсом. Показываем, что label кликабелен. */
.checkbox + label {
cursor: pointer;
}
/* Далее идет оформление чекбокса в современных браузерах, а также IE9 и выше.
Благодаря тому, что старые браузеры не поддерживают селекторы :not и :checked,
в них все нижеследующие стили не сработают. */
/* Прячем оригинальный чекбокс. */
.checkbox:not(checked) {
position: absolute;
opacity: 0;
}
.checkbox:not(checked) + label {
position: relative; /* будем позиционировать псевдочекбокс относительно label */
padding: 0 0 0 60px; /* оставляем слева от label место под псевдочекбокс */
}
/* Оформление первой части чекбокса в выключенном состоянии (фон). */
.checkbox:not(checked) + label:before {
content: '';
position: absolute;
top: -4px;
left: 0;
width: 50px;
height: 26px;
border-radius: 13px;
background: #CDD1DA;
box-shadow: inset 0 2px 3px rgba(0,0,0,.2);
}
/* Оформление второй части чекбокса в выключенном состоянии (переключатель). */
.checkbox:not(checked) + label:after {
content: '';
position: absolute;
top: -2px;
left: 2px;
width: 22px;
height: 22px;
border-radius: 10px;
background: #FFF;
box-shadow: 0 2px 5px rgba(0,0,0,.3);
transition: all .2s; /* анимация, чтобы чекбокс переключался плавно */
}
/* Меняем фон чекбокса, когда он включен. */
.checkbox:checked + label:before {
background: #9FD468;
}
/* Сдвигаем переключатель чекбокса, когда он включен. */
.checkbox:checked + label:after {
left: 26px;
}
/* Показываем получение фокуса. */
.checkbox:focus + label:before {
box-shadow: 0 0 0 3px rgba(255,255,0,.5);
}
</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 = [
[500, 600, 100],
[500, 700, 100]
];
var price = {
500: {
500: 1000,
600: 2000,
700: 2100
},
600: {
500: 2000,
600: 2050,
700: 2200
}
};
function out() {
var p = $(".opt .amount").get();
var width = p[0].value;
var height = p[1].value;
var q = $('#checkbox3').is(":checked")? 2 : 0;
var res = price[width] && price[width][height] || "уточните цену у консультанта";
var t = +$('input[name=quantity]').val()||1;
var total = t*1000;
$('#okno').val(total);
$(".res").html(res + q) ;
//$(".res").html(res + q + t)
}
$(".opt").each(function(i, el) {
var d = data[i],
am = $(".amount", el),
sl =
$(".slider", el);
sl.slider({
min: d[0],
max: d[1],
step: d[2],
slide: function(event, ui) {
am.val(ui.value);
out()
},
change: function(event, ui) {
am.val(ui.value);
out()
},
stop: out
});
sl.slider("option", "value", d[0])
})
$('#checkbox3').on("click", out);
$('input[name=quantity]').on("input", out)
out()
});
</script>
</head>
<body>
<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="opt3">
<input type="checkbox" id="checkbox3" class="checkbox">
<label for="checkbox3">Я переключаю чекбокс</label>
</div>
<input name="quantity" type="number" min="1" max='3' value="1"/> шт. <br>
<input id="okno" name="totalprice" type="text" readonly value="1000"/> руб.
<div class="res" style="padding-top: 50px;">0</div>
</body>
</html>
|
|
|
|
