28.01.2014, 01:15
|
Интересующийся
|
|
Регистрация: 02.09.2009
Сообщений: 11
|
|
У меня на некоторых страницах может быть один элемент, на других 5, на третьих 8 - заранее не известно.
JavaScript очень туго дается. Понимаю что делаю неправильно, но пока нужно хотя бы чтобы работало.
ID внутри контейнера сделал, потому что там дальше идет передача данных в модальное окно и потом отправка аяксом на сервер.
Если не сложно, подскажите как заставить работать, пусть даже не кошерно.
|
|
28.01.2014, 01:31
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,112
|
|
nohc,
пока вы заливали ....
<!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>
|
|
28.01.2014, 02:37
|
Интересующийся
|
|
Регистрация: 02.09.2009
Сообщений: 11
|
|
рони,
вы волшебник!!!
Огромное Вам спасибо от всей души!!!
|
|
28.01.2014, 03:03
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,112
|
|
nohc,
так на всякий случай ... кофициенты кроме 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()
}
})
})
});
|
|
28.01.2014, 03:24
|
Интересующийся
|
|
Регистрация: 02.09.2009
Сообщений: 11
|
|
Вау, а я думал не смогу сделать. Второй раз стыдно уже было обращаться.
Огромное-огромное спасибо! Моей благодарности нет предела!!!
|
|
28.01.2014, 03:45
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,112
|
|
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()
}
|
|
28.01.2014, 06:28
|
Профессор
|
|
Регистрация: 23.10.2010
Сообщений: 2,718
|
|
Меня сам подход обескураживает. Сидишь значит пишешь php скрипт (или опять стырено с гитхаба?) и так пишешь, чтобы затем в другом скрипте, в js, героически обходить косяки того скрипта, своего собственного.
Тогда еще вопрос. Что вы будете делать в процессинге со всеми этими name="days56"? Из $_POST['pv'][] доставать, правильно? Ну так это оно и есть: фиксированное отношение потомков к родителю. Которое и на js воспроизвести как два пальца.
|
|
31.01.2014, 23:53
|
Интересующийся
|
|
Регистрация: 02.09.2009
Сообщений: 11
|
|
Сообщение от kostyanet
|
Меня сам подход обескураживает. Сидишь значит пишешь php скрипт (или опять стырено с гитхаба?) и так пишешь, чтобы затем в другом скрипте, в js, героически обходить косяки того скрипта, своего собственного.
Тогда еще вопрос. Что вы будете делать в процессинге со всеми этими name="days56"? Из $_POST['pv'][] доставать, правильно? Ну так это оно и есть: фиксированное отношение потомков к родителю. Которое и на js воспроизвести как два пальца.
|
Каждый daysNN принадлежит ресурсу с idNN. На сайте очень много выборок по разным условиям, и неизвестно заранее где, в каком количестве и порядке будут выводиться эти ресурсы.
У каждого ресурса есть еще туча свойств, которые после передачи аяксом получаю как раз через id.
days56 - просто автоматически подставляется в конец ID ресурса, чтобы неймы были уникальными
Modx
Последний раз редактировалось nohc, 01.02.2014 в 03:06.
|
|
|
|