Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.12.2012, 03:27
Аватар для mi.rafaylik
Кандидат Javascript-наук
Отправить личное сообщение для mi.rafaylik Посмотреть профиль Найти все сообщения от mi.rafaylik
 
Регистрация: 07.12.2012
Сообщений: 113

передача значения из input "value" в div "id"
Схема такая:
Есть ссылка <a> которая по клику записывает значения своего id в куки с разделителем "-" а именно название, цену и количество. Нужно сделать так, чтоб количество определял пользователь с помощью <input> значения value. То есть цифра из <input value> должна попасть в конец <a id> вместо еденицы (1 штука по умолчанию).
было: product1-price100-1
должно быть: product1-price100-2
Логически получился следующий код, который так и не заработал
Что нужно изменить для успешного выполнения?

HTML:
<div class='add'><a id='product1-price100-1' class='addCart'></a> <input class='addCopies' value='2'></div>
<div class='add'><a id='product2-price100-1' class='addCart'></a> <input class='addCopies' value='2'></div>

jQuery:
$(document).ready(function(){

$('div.add').each( //для каждого блока со стилем .add
var div = $(this);
var a = $(div).('a');
var i = $(div).('input');
var value = $(i).val(); //берём значение input value
var a_id = $(a).attr('id'); //смотрим значение a id
var arr = a_id.split('-'); //парсим a id по дефису
var new_id = arr[0] + arr[1] + "-" + value; //добавляем новое значение
$(a).attr('id',new_id);//заменяем id на новое
);

});

Последний раз редактировалось mi.rafaylik, 07.12.2012 в 03:31.
Ответить с цитированием
  #2 (permalink)  
Старый 07.12.2012, 05:43
Аватар для Serg_pnz
Сам по себе
Отправить личное сообщение для Serg_pnz Посмотреть профиль Найти все сообщения от Serg_pnz
 
Регистрация: 09.06.2009
Сообщений: 963

Поправил ошибки
$(document).ready(function(){

  $('div.add').each(function(){ //для каждого блока со стилем .add
var div = $(this);
var a = $(div).children('a');
var i = $(div).children('input');
var value = $(i).val(); //берём значение input value
var a_id = $(a).attr('id'); //смотрим значение a id
var arr = a_id.split('-'); //парсим a id по дефису
var new_id = arr[0] + arr[1] + "-" + value; //добавляем новое значение
$(a).attr('id',new_id);//заменяем id на новое
});
  
});
Ответить с цитированием
  #3 (permalink)  
Старый 07.12.2012, 11:03
Аватар для mi.rafaylik
Кандидат Javascript-наук
Отправить личное сообщение для mi.rafaylik Посмотреть профиль Найти все сообщения от mi.rafaylik
 
Регистрация: 07.12.2012
Сообщений: 113

спасибо, действительно ночная оплошность ))
теоритически всё логично, но на практике пример всё равно не заработал..
Ответить с цитированием
  #4 (permalink)  
Старый 07.12.2012, 11:24
Аспирант
Отправить личное сообщение для Sanda Посмотреть профиль Найти все сообщения от Sanda
 
Регистрация: 12.10.2012
Сообщений: 90

А где, собственно, указание на то, что действие должно выполняться по клику? Может, $('div.add').click?

Много лишних долларов в коде. jQuery-селектор возвращает jQuery-массив, его нет смысла потом оборачивать в лишний $ - мы ведь нигде не обращаемся к отдельному элементу этого массива.
var div = $(this);
var a = div.children('a');
var i = div.children('input');
var value = i.val(); //берём значение input value
var a_id = a.attr('id'); //смотрим значение a id


Доллары имеют смысл, только если делать вот так:
var div = $(this);
var i = div.children('input')*!*[0]*/!*;
var value = *!*$(i)*/!*.val(); //i - не jQuery, a HTMLElement


Но ещё правильнее в этом случае переписать по-другому:

var div = $(this);
var i = div.children('input')*!*.eq(0)*/!*;
var value = *!*i*/!*.val(); //i - jQuery
Ответить с цитированием
  #5 (permalink)  
Старый 07.12.2012, 11:44
Аватар для mi.rafaylik
Кандидат Javascript-наук
Отправить личное сообщение для mi.rafaylik Посмотреть профиль Найти все сообщения от mi.rafaylik
 
Регистрация: 07.12.2012
Сообщений: 113

Sanda
действие происходит по клику на <a class='addCart'> - я хотел чтоб значение передавалось сразу после ввода в <input>, но Вы вероятно правы, нужно по клику.
Ответить с цитированием
  #6 (permalink)  
Старый 07.12.2012, 12:00
Аспирант
Отправить личное сообщение для Sanda Посмотреть профиль Найти все сообщения от Sanda
 
Регистрация: 12.10.2012
Сообщений: 90

Не важно, как именно передавать - по клику, по вводу. Важно указать в коде метод передачи (: В представленном куске его просто нет. На document.ready однократно выполняется некое действие, но никаких указаний на то, что это же действие нужно выполнять ещё раз, нет.
Ответить с цитированием
  #7 (permalink)  
Старый 07.12.2012, 12:04
Аватар для mi.rafaylik
Кандидат Javascript-наук
Отправить личное сообщение для mi.rafaylik Посмотреть профиль Найти все сообщения от mi.rafaylik
 
Регистрация: 07.12.2012
Сообщений: 113

о, в какую сторону двигаться понял, спасибо )
Ответить с цитированием
  #8 (permalink)  
Старый 07.12.2012, 12:08
Аспирант
Отправить личное сообщение для Sanda Посмотреть профиль Найти все сообщения от Sanda
 
Регистрация: 12.10.2012
Сообщений: 90

Повторюсь - вместо $('div.add').each поставь $('div.add').click. Ну и исправления Serg_pnz не забудь добавить. Не самый правильный вариант реализации, конечно, но работать должен.
Ответить с цитированием
  #9 (permalink)  
Старый 07.12.2012, 14:47
Аватар для mi.rafaylik
Кандидат Javascript-наук
Отправить личное сообщение для mi.rafaylik Посмотреть профиль Найти все сообщения от mi.rafaylik
 
Регистрация: 07.12.2012
Сообщений: 113

Попутно input заменил на select, а родительский div на p.

Решение проблемы 1:
В строке 8 нужно было не просто указать значение value, а указать, что оно добавляется к уже имеющемуся id!
было: '-' + 'value'
стало: 'id' + '-' + 'value'

Решение проблемы 2:
Для элемента <select> нужен не .click() а .change() !
С этим кодом заработало:
$(document).ready(function(){
	$('#products p').change(function(){
	var p = $(this);
	var a = p.children('a');
	var s = p.children('select').eq(0);
	var value = s.val();
	var a_id = a.attr('id');
	var arr = a_id.split('id' + '-');
	var new_id = arr[0] + arr[1] + '-' + value;
	$(a).attr('id', new_id);
	});
});

Последний раз редактировалось mi.rafaylik, 07.12.2012 в 15:16.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Получение значения input vladimircape jQuery 3 09.05.2015 21:54
изменение значения input при смене значения select galart jQuery 4 30.01.2015 19:39
При добавлении DOCTYPE "плывут" размеры input type=text Demath (X)HTML/CSS 4 08.07.2012 19:27
Opera, input file, div tabindex autosoft Events/DOM/Window 31 04.07.2012 02:45
изменение картинок в зависимости от значения input jump91 Общие вопросы Javascript 2 30.01.2012 09:57