Присвоить значения атрибуту из переменной
Добрый вечер! Делаю корзину на основе готового решения и столкнулся с такой проблемой: занес в переменную количество товара
var plat = document.getElementById("kolvo").value;
теперь необходимо значение этой переменной вставить в html <button class="border" onclick="cart.addToCart(this, '002', 'Зонт1', '1500', 'здесь значение переменной plat')">Купить</button> Подскажите пожалуйста как это сделать. И еще вопрос, так как позиций товаров много, каким образом получать значение переменной plat (количество товара) именно текущего товара? |
<html>
<head>
</head>
<body>
<input id="kolvo">
<button class="border" onclick="card.addToCard(this, '002', 'Зонт1', '1500', kolvo.value)">Купить</button>
<script>
card={
addToCard: function(env, foo, bar, baz, plat){alert(plat)}
}
</script>
</body>
</html>
|
Спасибо за ответ. Решил немного другим способом.
Теперь мучаюсь со значением текущего input. Когда добавляю в корзину, всегда берется значение первого input.
this.addToCart = function(curObj, id, name, price, num)
{
num = $(".mam").val();
num = parseInt(num)
alert(num)
так получаю значение value. Но значение всегда первого input. В чем проблема? Подскажите пожалуйста |
Цитата:
|
apisklov,
ничем не могу помочь. Вы "решили" по-своему, брать значения всегда из первого инпута, и спрашиваете, как не делать этого. Это пародоксальный вопрос. |
<div class="item border"> <img src="img/shop/zont1.png" width="200"> <p><b>Зонт1</b> | Цена: 1200 руб</p> <div class="sum_but"> <span class="plus">+</span> <input value="1" maxlength="2" name="" id="" type="text" class="mam"> <span class="minus">-</span> </div> <button class="border" onclick="cart.addToCart(this, '001', 'Зонт1', '1200', '')">Купить</button> </div> <div class="item border"> <img src="img/shop/zont2.png" width="200"> <p><b>Зонт2</b> | Цена: 1500 руб</p> <div class="sum_but"> <span class="plus">+</span> <input value="1" maxlength="2" name="" id="" type="text" class="mam"> <span class="minus">-</span> </div> <button class="border" onclick="cart.addToCart(this, '002', 'Зонт2', '1500', '')">Купить</button> </div> |
Дело в том, что вашим способом тоже значение берется из первого input. Либо я не совсем правильно что-то делаю.
|
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="">
<meta name="description" content="">
<title>ГГ</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
<div class="item border">
<img src="img/shop/zont1.png" width="200">
<p><b>Зонт1</b> | Цена: 1200 руб</p>
<div class="sum_but">
<span class="plus">+</span>
<input value="3" maxlength="2" name="" id="" type="text" class="mam">
<span class="minus">-</span>
</div>
<button class="border" onclick="cart.addToCart(this, '001', 'Зонт1', '1200', '')">Купить</button>
</div>
<div class="item border">
<img src="img/shop/zont2.png" width="200">
<p><b>Зонт2</b> | Цена: 1500 руб</p>
<div class="sum_but">
<span class="plus">+</span>
<input value="5" maxlength="2" name="" id="" type="text" class="mam">
<span class="minus">-</span>
</div>
<button class="border" onclick="cart.addToCart(this, '002', 'Зонт2', '1500', '')">Купить</button>
</div>
<script>
var inputs = document.getElementsByClassName('mam');
alert(inputs[0].value);
alert(inputs[1].value);
</script>
<script>
var inputs = $('.mam');
alert(inputs[0].value);
alert(inputs[1].value);
</script>
</body>
</html>
|
не совсем понял. а если 50 позиций товаров?
|
Цитата:
var inputs = document.getElementsByClassName('mam');
for (var i = 0; i < inputs.length; i++)
alert(inputs[i].value);
|
в общем совсем запутался. циклом прошелся, как вы и сказали, но вот не понимаю одно, алерт выводит все значения value по порядку, но как занести в переменную например 14 элемент.
inputs = inputs[i].value- выводит опять же значение первого инпута. |
Цитата:
<button class="border" onclick="card.addToCard(this, '002', 'Зонт1', '1500', kolvo.value)">Купить</button> заменить на это: <button class="border" data-val="'002','Зонт1',1500">Купить</button> Назначит кнопкам обработчик, в котором получать значения атрибута data-val, добавляя к ним this (текущая кнопка) и значение input в родительском элементе "item", и передавая их как значения аргументов для функции cart.addToCart(). |
Цитата:
inputs[13].value - это значения 14-го элемента. |
Цитата:
хотел спросить, как код будет понимать, что сейчас я работаю, например, с 14 элементом и нужно получить его value? |
Цитата:
if ( i == 13)
//код работающий с 14-ым элементом
|
Цитата:
|
Спасибо за ответы. На основе всего, что вы мне написали, сделал так
$('button').on('click', numJq);
function numJq(){
num = $(this).parent().find('input').val();
}
проверяю алертом, получаю правильные значения value. Теперь еще одна проблема, результат выполнения этой функции (numJq) перенести в функцию
this.addToCart = function(curObj, id, name, price, num)
{
id = ( $.isNumeric(id) ) ? "ID" + id.toString() : id;
var goodieLine = {"id" : id, "name" : name, "price": price, "num" : num, "url" : document.location.href};
if ($.isEmptyObject(this.DATA))
{
this.DATA[id] = goodieLine;
this.IDS.push(id);
}
else
for(var idkey in this.DATA)
{
if($.inArray(id, this.IDS) === -1)
{
this.DATA[id] = goodieLine;
this.IDS.push(id)
}
else
if (idkey == id)
{
this.DATA[idkey].num += num;
}
}
которая и добавляет товар в корзину. Пытался создавать глобальную переменную - не работает. Полный код, который отвечает за добавление в корзину
$('button').on('click', numJq);
function numJq(){
num = $(this).parent().find('input').val();
alert(num);
}
this.addToCart = function(curObj, id, name, price, num)
{
id = ( $.isNumeric(id) ) ? "ID" + id.toString() : id;
var goodieLine = {"id" : id, "name" : name, "price": price, "num" : num, "url" : document.location.href};
if ($.isEmptyObject(this.DATA))
{
this.DATA[id] = goodieLine;
this.IDS.push(id);
}
else
for(var idkey in this.DATA)
{
if($.inArray(id, this.IDS) === -1)
{
this.DATA[id] = goodieLine;
this.IDS.push(id)
}
else
if (idkey == id)
{
this.DATA[idkey].num += num;
}
}
localStorage.setItem(this.cardID, JSON.stringify(this.DATA));
localStorage.setItem(this.cardID + "_ids", JSON.stringify(this.IDS));
this.reCalc();
this.renderBasketTable();
var bird = $("#" + this.cardID + "_bird");
var pos = $(curObj).position();
bird.offset({ top: pos.top, left: pos.left});
bird.html(price);
bird.show();
bird.animate(
{
'left': this.widjetPos.left,
'top': this.widjetPos.top
}
,
{
'duration': 500,
complete: function()
{
bird.offset({ top: -300, left: -300});
}
});
if (this.CONFIG.showAfterAdd)
{
cart.showWinow('bcontainer', 1);
}
}
Какие еще варианты есть, не подскажите? |
Не нужна функция посредник:
$('button').click(function() {
$(this).parent().find('input').val() - передаем далее в функцию
})
//или методом .on, но уж тогда делегировать обработку ближайшему общему родителю их родителя
$('selector').on('click', 'button', function() {
//передаем далее
})
А куда же делись '002','Зонт1',1500 и откуда этот код: this.addToCart = function(curObj, id, name, price, num), из чего-то выдрано? Чей это this? |
в оригинале все выглядит так
HTML: <div class="item border"> <img src="img/shop/zont1.png" width="200"> <p><b>Зонт1</b> | Цена: 1200 руб</p> <div class="sum_but"> <span class="plus">+</span> <input value="1" maxlength="2" name="" id='' type="text" class="mam"> <span class="minus">-</span> </div> <button class="border" onclick="cart.addToCart(this, '001', 'Зонт1', '1200', '')">Купить</button> </div> JS - обработчик:
function WICard(obj)
{
this.widjetX = 0;
this.widjetY = 0;
this.widjetObj;
this.widjetPos;
this.cardID = "";
this.DATA = {};
this.IDS = [];
this.objNAME = obj;
this.CONFIG = {};
this.IMG = "...";
this.init = function(widjetID, config)
{
this.CONFIG = config || {};
try {
this.DATA = JSON.parse(localStorage.getItem(widjetID)); // code to try
//console.log("TRY - OK");
if ($.isEmptyObject(this.DATA))
{
this.DATA = {};
}
}
catch (e)
{
this.DATA = {};
//onsole.log("TRY - BED");
}
try {
this.IDS = JSON.parse(localStorage.getItem(widjetID + "_ids"));
if ($.isEmptyObject(this.IDS))
{
this.IDS = [];
}
}
catch (e)
{
this.IDS = [];
}
//console.log(this.DATA);
this.cardID = widjetID;
$("body").append("<div class='bird' id='"+widjetID +"_bird'></div>");
this.widjetObj = $("#" + widjetID);
this.widjetPos = this.widjetObj.position();
if ($.isEmptyObject(this.DATA))
{
this.widjetObj.html("Корзина пуста");
}
else
{
this.reCalc();
this.renderBasketTable();
}
}
/***********************************************************************************************
* example: onclick="cart.addToCart(this, '2', 'Name of comic 2', '25500')
**********************************************************************************************/
$('button').click(function() {
num = $(this).parent().find('input').val();
alert(num);
})
this.addToCart = function(curObj, id, name, price, num)
{
id = ( $.isNumeric(id) ) ? "ID" + id.toString() : id;
var goodieLine = {"id" : id, "name" : name, "price": price, "num" : num, "url" : document.location.href};
if ($.isEmptyObject(this.DATA))
{
this.DATA[id] = goodieLine;
this.IDS.push(id);
}
else
for(var idkey in this.DATA)
{
if($.inArray(id, this.IDS) === -1)
{
this.DATA[id] = goodieLine;
this.IDS.push(id)
}
else
if (idkey == id)
{
this.DATA[idkey].num += num;
}
}
localStorage.setItem(this.cardID, JSON.stringify(this.DATA));
localStorage.setItem(this.cardID + "_ids", JSON.stringify(this.IDS));
this.reCalc();
this.renderBasketTable();
var bird = $("#" + this.cardID + "_bird");
var pos = $(curObj).position();
bird.offset({ top: pos.top, left: pos.left});
bird.html(price);
bird.show();
bird.animate(
{
'left': this.widjetPos.left,
'top': this.widjetPos.top
}
,
{
'duration': 500,
complete: function()
{
bird.offset({ top: -300, left: -300});
}
});
if (this.CONFIG.showAfterAdd)
{
cart.showWinow('bcontainer', 1);
}
}
|
Ну во-первых, этот обработчик должен "навешиваться" на что-то, если понимаете что и как, то на что указывает obj при вызове этого плагина?
Тут можно вообще отказаться от данных в кнопке, перенеся из в поле ввода, и немного подправив код плагина, тогда самое поле ввода будет источником всех данных, а функция будет определена в обработчике щелчка кнопки. |
laimas,
можете пожалуйста пояснить, что вот это значит this.init = function(widjetID, config) что такое this? init - переменная с результатом функции? Вроде разобрался с получением данных по клику на ссылку, как вы и писали. Но вот теперь не добавляется все это в корзину, подозреваю, что дело все в этих this Вы писали про obj:
<script>
$(document).ready(function(){
// $('.item_img').loupe({ width: 200, height: 150, loupe: 'loupe'});
// Форма для валидации
$.validationEngine.defaults.scroll = false;
var contactForm = $('#formToSend');
// Подключаем корзину
cart = new WICard("cart");
var config = {'clearAfterSend':true, 'showAfterAdd':true, 'valudate':contactForm};
cart.init("basketwidjet", config);
});
document.addEventListener('visibilitychange', function(e) {
cart.init("basketwidjet", {});
}, false);
</script>
cart = new WICard("cart")
|
this - дословно переводится как "это". В JS определяет контекст.
Не знаю, что вы там по клику сделали, но если плагин добавляет в корзину только по щелчку кнопки (что видно по нативному обработчику), но аргументы функции можно и расширить addToCart(), но еще проще
$('body').on('click', 'button', function() {
cart.addToCart($(this.parentNode).find('input'))
//ну или саму кнопку передавать в плагин, а в нем уже искать поле ввода ну а далее уже все в нем брать
});
//в плагине
this.addToCart = function(curObj) {
//curObj, это поле ввода, а все остальные данные типа '002','Зонт1',1500
//будет содержать это же поле ввода, а не кнопка, в атрибуте data-val,
//куда сервер и поместит данные при выводе,
//только не надо обрамлять 1500 в кавычки, это не строка, а число,
//и зря отдавать клиенту два байта на значение, да еще никчемные пробелы между ними....
//эти значения получаются как
var d = curObj.data('val').split(',');
//ну и останется сопоставить их "id", "name", "price"
}
Разберетесь? |
laimas,
огромное спасибо. Благодаря вашим подсказкам и советам, сделал то, что хотел. |
| Часовой пояс GMT +3, время: 09:23. |