Простой калькулятор - как сделать выборку?
Здравствуйте!
Есть такой код: JS:
function calc() {
var v = $('#wrap56 .spinner input').val();
var pv = $('#wrap56 #pv56').val();
$('#day-price56').html(pv);
$('#price56').html(parseInt(pv*v));
}
var spinner = $('.spinner').tb3spinner({'value':12,min:12,max:60, attrs:{'name':'days56'},changed:function(){calc()} });
HTML:
<div id="wrap56">
<input name="pv" id="pv56" type="hidden" value="100" />
<div class="spinner>
<input type="text" name="days56" value="12">
</div>
<div id="price56">1200</div> рублей
<div id="day-price56">100</div> руб. в сутки
</div>
Так все работает. Но что делать, если вывожу на странице неизвестное количество wrap[id], pv[id], day-price[id], price[id] - (wrap55,wrap56,wrap57, ...)? Пытался что-то сделать через div[id^=wrap] и this - ничего не получается. Помогите пожалуйста - как правильно сделать выборку? Заранее огромное спасибо! Используется tb3spinner.js, но думаю, разницы нет. |
Цитата:
|
nohc,
function calc() {
var parent = $(this).parents('[id^=wrap]')
var v = +this.value;
var pv = +$('[id^=pv]',parent).val();
$('[id^=day]',parent).html(pv);
$('[id^=price]',parent).html(pv*v);
}
может у вас неполучалось из-за опечатки в 3 строке? |
https://bitbucket.org/kolerii/jquery.tb3spinner.js/
Он только для превращения инпута в спиннер используется |
Цитата:
Так тоже не получается - пропадает инпут (он динамически создается tb3spinner'ом) |
Делаю вот так:
function calc() {
var parent = $(this).parents('div[id^=wrap]');
var v = +this.value;
//var pv = +$('[id^=pv'],parent).val();
//$('[id^=day]',parent).html(pv);
//$('[id^=price]',parent).html(pv*v);
alert(v);
}
Выскакивает сообщение: NaN |
nohc,
видеть надо работу вашего плагина а не гадать |
Сейчас по быстрому залил на хостинг, можно посмотреть здесь:
http://zen-book.ru/ |
Полнейший пипец. Искать через три-девять земель два инпута чтобы перемножить их валуи.
Цитата:
Другими словами скрипт знает что первый чайлд <div id="wrap56"> это "в день", а второй чайлд это "в час" или как там у вас, не важно. Это если вы найдете все <div id="wrapХХХХХХХ">. А если не найдете то и не надо. Потому что по имени, которое может быть одинаковым для 100500 инпутов, вы найдете все 100500, каждый из которых найдет свою пару среди 100500 тех инпутов, с валуями которых ему хочется умножиться. В процессе повешания функции calc() на инпуты профтыкаете счетчик как index во все найденные по имени элементы множимого. И тогда любой множимый найдет множителя: var my_pair = document.getElementsByName('known_name')[this.index]; Ну и самое очевидно: загрузите с сервера готовый массив этих id и не парьтесь поисками пары. |
На сервере одинаковые имена превратятся в "индексный" массив если там php.
Не проверял и не собираюсь, но среди мощностей jquery по идее должна быть и такая, которая умеет собирать в объекты ссылки на элементы по именам в формате name="some[97]"; Потому что сплошняком индексный не всегда удобен, хотя никакой разницы нет - чуть-чуть немного больше исходящего трафика пойдет, поскольку придется отгружать все, а не только нужное. |
У меня на некоторых страницах может быть один элемент, на других 5, на третьих 8 - заранее не известно.
JavaScript очень туго дается. Понимаю что делаю неправильно, но пока нужно хотя бы чтобы работало. ID внутри контейнера сделал, потому что там дальше идет передача данных в модальное окно и потом отправка аяксом на сервер. Если не сложно, подскажите как заставить работать, пусть даже не кошерно. |
nohc,
пока вы заливали .... :write:
<!DOCTYPE html>
<html>
<head>
<title>Twitter Boostrap 3 Spinner</title>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://kolerii.ru/projects/tb3spinner/jquery.tb3spinner.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<!--<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>-->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<style type="text/css">
.btn-spinner{font-size:10.2px;line-height:1;border-radius:3px;margin-top:1.25px;padding:0px 3px 0px 0px}
.chevron-spinner-up{padding-left:1.5px}
.chevron-spinner-down{padding-left:0.5px}
.input-spinner{position:absolute;padding-right:0px;width:55px}
.container-btn-spinner{margin-left:37px}
.spinner-container{width:56px}
div[id^=wrap]{display:inline-block}
</style>
<script>
$(function () {
var $spinner = $('.spinner');
$spinner.each(function (indx, element) {
var el = $(element),
parent = el.parents('[id^=wrap]'),
pv = +$('[id^=pv]', parent).val(),
day = $('[id^=day]', parent),
price = $('[id^=price]', parent),
v = +$('input', el).val();
price.html(parseInt(pv * v));
day.html(pv);
el.tb3spinner({
'value': 12,
min: 12,
max: 60,
attrs: {
'name': 'days56'
},
changed: function () {
var v = +$('input', el).val();
price.html(parseInt(pv * v));
}
});
})
})
</script>
</head>
<body>
<div id="wrap56">
<input name="pv" id="pv56" type="hidden" value="100">
<div class="spinner">
<input type="text" name="days56" value="12">
</div>
<div id="price56">1200</div>рублей
<div id="day-price56">100</div>руб. в сутки</div>
<div id="wrap56">
<input name="pv" id="pv56" type="hidden" value="120">
<div class="spinner">
<input type="text" name="days56" value="12">
</div>
<div id="price56">1200</div>рублей
<div id="day-price56">100</div>руб. в сутки</div>
<div id="wrap56">
<input name="pv" id="pv56" type="hidden" value="160">
<div class="spinner">
<input type="text" name="days56" value="12">
</div>
<div id="price56">1200</div>рублей
<div id="day-price56">100</div>руб. в сутки</div>
</body>
</html>
|
рони,
вы волшебник!!! Огромное Вам спасибо от всей души!!! |
nohc,:dance:
так на всякий случай ... кофициенты кроме pa и саму формулу sum уточните сами. ;жмите Показать исходный код
$(function () {
var $spinner1 = $(".spinner-1"),
$spinner2 = $(".spinner-2"),
$spinner3 = $(".spinner-3");
$spinner1.each(function (indx, element) {
var el1 = $(element);
var parent = el1.parents(".tab-pane");
var old = 1,
childs = 0,
days = 12;
var price = $("span[id^=price]", parent);
var pa = +$('[name="pa"]', parent).val();
var sum = function () {
price.html((old * pa + childs * pa) * days)
};
sum()
el1.tb3spinner({
"value": 1,
min: 1,
max: 6,
attrs: {
"name": "old"
},
changed: function () {
old = +$("input", el1).val();
sum()
}
});
var el2 = $spinner2.eq(indx);
el2.tb3spinner({
"value": 0,
min: 0,
max: 6,
attrs: {
"name": "childs"
},
changed: function () {
childs = +$("input", el2).val();
sum()
}
});
var el3 = $spinner3.eq(indx);
el3.tb3spinner({
"value": 12,
min: 12,
max: 60,
attrs: {
"name": "days"
},
changed: function () {
days = +$("input", el3).val();
sum()
}
})
})
});
|
Вау, а я думал не смогу сделать. Второй раз стыдно уже было обращаться.
Огромное-огромное спасибо! Моей благодарности нет предела!!! |
nohc,
строка 44 плагина if(typeof(this.options.changed) == 'function') this.options.changed(); можно сделать так if(typeof(this.options.changed) == 'function') this.options.changed(+e.val()); тогда получение значения упрощается до
changed: function (val) {
old = val
sum()
}
|
Меня сам подход обескураживает. Сидишь значит пишешь php скрипт (или опять стырено с гитхаба?) и так пишешь, чтобы затем в другом скрипте, в js, героически обходить косяки того скрипта, своего собственного.
Тогда еще вопрос. Что вы будете делать в процессинге со всеми этими name="days56"? Из $_POST['pv'][] доставать, правильно? Ну так это оно и есть: фиксированное отношение потомков к родителю. Которое и на js воспроизвести как два пальца. |
Цитата:
У каждого ресурса есть еще туча свойств, которые после передачи аяксом получаю как раз через id. days56 - просто автоматически подставляется в конец ID ресурса, чтобы неймы были уникальными Modx |
| Часовой пояс GMT +3, время: 10:48. |