Не могу понять почему не работает код?

Question

[Sergey750il]

Доброго времени суток. Написал простой код, но не могу понять почему не работает так как надо. При клике по одному из radio первой группы должен добавляться id к блоку с radio второй группы, а далее уже в зависимости от того какой radio выбран во второй группе срабатывать условия.
И не выводится второй алерт при клике по второй группе radio (возможно дело в области видимости, но не могу понять как тогда вернуть переменную, через return не вышло)

$(document).ready(function() {
 	
 	$('.b-radio-toolbar-memory input:radio').click(function() {
 		var memory = $(this).val();
 		alert(memory);
 		$('.b-radio-toolbar-color').attr('id', memory);
 	});
 
 	$('#' + memory + ' input:radio').click(function() {
 		var color = $(this).val();
 		alert(memory);
 		if (color == 'gray') {
 			$('.change-color_js').html('Серый космос');
 		} else if (color == 'silver') {
 			$('.change-color_js').html('Серебрянный');
 		}
 	});
 
 });

Comments

[Kovalsky]

$('#' + memory + ' input:radio') - эта инструкция вообще бросает ошибку, т.к. memory не объявлен

[Sergey750il]

Никита Полевой: объявил переменную перед первым кликом, но все равно не работает.

[Kovalsky]

Sergey750il: $('#' + memory + ' input:radio') - какие элементы возвращаются этим селектором?

[Sergey750il]

Никита Полевой: возвращает radio button на котором произошел клик, а далее из него извлекается value,

[Kovalsky]

Sergey750il: то есть после первого .click() вы можете без проблем вывести в консоль эти элементы? Попробуйте - console.log($('#' + memory + ' input:radio').length)

[Sergey750il]

Никита Полевой: проблема с областью видимости, есть идеи как решить?

[Kovalsky]

Sergey750il: у вас несколько логических ошибок, две точно. Не только с областью видимости. Даже если вы решите её, всё равно не взлетит, из-за другой ошибки. А я лишь хотел пошагово подвести вас к осознанию этих мелких ошибок, то есть не чтоб я идеи тут генерировал, а у вас они появлялись в результате последовательного разбора алгоритма. Вы же спрашиваете Не могу понять почему не работает код?, а я вам как раз и объясняю. Идеи как решить это уже не по теме вопроса.

[Sergey750il]

Никита Полевой: пока ничего не возвращает тк мы не получили переменную memory

[Kovalsky]

Sergey750il: ну вот, поэтому и обработчик никуда не вешается. Поэтому, мне кажется, в вашем случае вместо второго .click() стоит повесить обработчик на весь body, а в нем уже с помощью is проверять соответствует ли элемент селектору '#' + memory + ' input:radio', и если соответствует, делать всё что нужно делать. Ну и memory, конечно же, вынести на уровень повыше и либо обязательно инициализировать (устанавливать предварительное значение), либо в обработчике на body не делать проверку на соответствие если memory не задан.

[Sergey750il]

Никита Полевой: Пробовал объявить переменную перед первым click, но все равно значение не меняется.

[Kovalsky]

Sergey750il: пользуйтесь jsfiddle.net - делайте там пример и показывайте, чтобы сразу было понятно где несостыковка.

[Sergey750il]

Никита Полевой: https://jsfiddle.net/sergey750il/9zecrjqq/

[Kovalsky]

Sergey750il: ну вот, круто, теперь в поле JAVASCRIPT нажимаете кнопку с шестеренкой справа сверху , в появившемся окошке в FRAMEWORKS & EXTENSIONS выбираете jQuery, например edge. Таким образом подключаете jquery. Вот. Не забудьте слева сверху нажать кнопку update.

Теперь по коду - возвращать из анонимной функции не нужно, строка memory = $(this).val(); успешно справляется со своей задачей: записывает значение инпута в переменную memory. А вот второй .click() уже выполнился - ему не было передано никаких элементов и он не повесил ни на что обработчик. Именно поэтому я говорил что нужно вешать обработчик на body, который будет проверять кликнутый элемент на соответствие.

[Sergey750il]

Никита Полевой: ну могу понять про второй клик. как он мог быть, если кликали по radio из первого блока?

[Kovalsky]

Sergey750il: метод click вешает обработчик на элементы. Вот ваш код упрощенно:

$(document).ready(function() {
	var memory ='50';

	$('.b-radio-toolbar-memory input:radio').click(function() {
		memory = $(this).val();
	});

	$('#' + memory + ' input:radio').click(function() {
		alert(memory);
	});
});

Далее пошагово алгоритм:

1. $(document).ready(function() { ... }) - таким образом вы на объект document вешаете обработчик, который выполняет переданную анонимную функцию когда страница загрузится,
2. Когда страница загрузилась, выполняется анонимная функция:

2.1. var memory ='50'; - объявляется переменная memory со значением '50',
2.2. $('.b-radio-toolbar-memory input:radio').click(function() { ... }) - на элементы выбранные селектором '.b-radio-toolbar-memory input:radio' вешается обработчик, который будет выполняться по событию click,
2.3. $('#' + memory + ' input:radio').click(function() { ... }) - на элементы выбранные селектором '#50 input:radio' вешается обработчик, тоже на click. В данном случае обработчик не вешается, т.к. селектор не возвращает элементов, элементов с таким id нету,

[Sergey750il]

Никита Полевой: 2.3 понял, что второй клик в том времени, когда нужный нам id еще не родился, выходит можно использовать .on, который может работать с новыми элементами?

[Kovalsky]

Sergey750il: если вы говорите о делегировании, то мне кажется в том виде, в котором оно реализовано в jQuery, оно у вас не будет работать, т.к. чтобы делегировать с помощью .on() вы должны передать селектор. А у вас селектор этот переменный. Но можете попробовать. Я всё же считаю, что лучше будет делегировать клик по инпутам на body, а потом уже проверять нужный ли инпут нажат.

[Sergey750il]

Никита Полевой:

Вот так сработало,  #32 изначально в DOM нет, он появляется только после клика. 

$('.b-conf__select').on('click','#32 input:radio', function() {
 		var color = $(this).val();
 		alert(color);
 		if (color == 'gray') {
 			$('.change-color_js').html('Серый космос');
 		} else if (color == 'silver') {
 			$('.change-color_js').html('Серебрянный');
 		}
 	});
 
 });

[Kovalsky]

Sergey750il: ну, в том примере что вы мне показали даже .b-conf__select нету

[Sergey750il]

Никита Полевой: Это обертка двух блоков с radio

[Sergey750il]

Sergey750il: https://jsfiddle.net/sergey750il/9zecrjqq/3/

[Kovalsky]

Sergey750il: а почему вы говорите что элемента с id="32" изначально нету в DOM? У вас в коде нигде нету создания элементов, поэтому о таком я и не думал. Но даже в таком случае, видите, делегирование с .on() не проканает, т.к. вам для тестового примера приходится хардкодить селектор.

Вам не нравится идея с проверкой нажатого элемента?

[Sergey750il]

Никита Полевой: он не создает элемент, он к классу добавляет нужный id

[Kovalsky]

Sergey750il: дошло. Ок. Ну всё равно, вы не сможете в on подставлять селектор. Или может я не знаю способа. Но я не знаю как это сделать. Моё мнение по поводу реализации вы уже знаете)

[Sergey750il]

Никита Полевой: Согласен, подставлять в on селектор не вышло.

[Sergey750il]

Никита Полевой: Те Вы предлагаете click повесить на весь body, а остальные клики обрабатывать через is?
Всегда думал, React сложен, а там сделать setState и счастье было бы)

[Kovalsky]

Sergey750il: это разные инструменты: jQuery упрощает работу с DOM, никак не влияя на логику, а react это в разы более сложный и комплексный инструмент управления интерфейсом, естественно включающий в себя и логику.

Я имею в виду такую проверку. Сверху выберите ID, снизу нажимайте на элементы. Если нажмете на элемент с выбранным ID, увидите соответствующее оповещение.

[Sergey750il]

Никита Полевой: В Вашем примере уже изначально добавлены все id, а вся соль в том что id ко второму блоку добавляется именно при клике на первый обработчик, а логика второго основывается именно на том, какой id присвоен.

[Kovalsky]

Sergey750il: мне кажется это довольно замороченная логика, думаю её можно упростить, если вы скажете что именно вы хотите сделать (я чо-то так и не понял пока).

Если всё же именно такая логика необходима, то в данном случае не имеет значения когда и к чему добавляется ID. Или я опять чего-то не понимаю.

[Sergey750il]

Никита Полевой: Опубликовал снимок, при выборе памяти и цвета меняется цена и строка цвета. Никаких подгрузок итд нет, обычный конфигуратор.

Answer 1

[Сергей Тутуков]

Почитай про область видимости javascript.Например
Наглядней некуда

var a = 1;
function foo() {
  var a = 2;
  return a;
}
function bar() {
    var a = 5;
    return a;
}
console.log(a); // 1
a = 10;
console.log(foo()); // 2
console.log(bar()); // 5
console.log(a); // 10

Comments

[Sergey750il]

я не могу понять как из анонимной функции вернуть переменную

[Сергей Тутуков]

Sergey750il: Я не знаю, что у тебя за задача, но уверен что так делать нельзя.
1) $('.b-radio-toolbar-color').attr('id', memory); - при это действии ты НЕ ОДИН раз добавляешь id! Те ты кликнул на другой input. а потом опять на первый и у первого опять id изменился.
2) .click() - нужно вешать не на input, а на label или еще что-то. И здесь не click() нужен, а change()
3-10 я пропущу.

Короче из рисунка ниже должно быть что-то типо этого. codepen.io/STutukov/pen/gLxodM