Как изменить скрипт для работы с несколькими блоками?

Question

[Артем Колчин]

Скажите, как переделать скрипт чтоб он воспринимал 2 блока?

Код без проблем работает так,

<li class="variant_amount">
<span style="background-color:#fff;" class="color_icon"></span>
<input name="variant" class="color_input" type="hidden" value="#fff" />
</li>

$('.color_icon, .color_link').ColorPicker({
		color: $('.color_input').val(),
		onShow: function (colpkr) {
			$(colpkr).fadeIn(500);
			return false;
		},
		onHide: function (colpkr) {
			$(colpkr).fadeOut(500);
			return false;
		},
		onChange: function (hsb, hex, rgb) {
			$('.color_icon').css('backgroundColor', '#' + hex);
			$('.color_input').val(hex);
			$('.color_input').ColorPickerHide();
		}
	});

Но если править

<li class="variant_amount">
<span style="background-color:#fff;" class="color_icon"></span>
<input name="variant" class="color_input" type="hidden" value="#fff" />
</li>
<li class="variant_amount">
<span style="background-color:#fff;" class="color_icon"></span>
<input name="variant2" class="color_input" type="hidden" value="#fff" />
</li>

Как написать чтоб привязывался не в variant2 и т.д. а был универсален, к примеру чтоб значений было 100

Answer 1

[Владислав Великоиваненко]

Для начала забыть наконец про jquery :)
К тому же нет четкой формулировки того, что ваш код вообще делает, что вы от него хотите, если взаимодействие (клик, изменение) и т.д., то через нативный js вы можете просто найти все эти элементы по одинаковому классу через document.querySelectorAll('.class'), а затем пройтись по каждому через forEach и назначить нужное событие.
НО, опять же, так как четкой формулировки нет, что вы хотите получить как результат, то мои слова - всего лишь предположения.

Comments

[Артем Колчин]

Нет , тут нужен именно jquery) почему про него стоит забывать? он очень удобен...
Просто хочу чтоб код работал именно с тем элементом на который я кликну, а получается что кликаю на первый, а он изменяет значение во всех class

[Владислав Великоиваненко]

Артем Колчин, я могу говорить только за нативный js, и в нём это оч просто реализовать через target, отлавливать кликнутый элемент и уже с ним работать.

[Артем Колчин]

Владислав Великоиваненко, ColorPicker работает только на jquery, я не знаю как его вывести на js

[Владислав Великоиваненко]

Артем Колчин,
<input type="color">

?

[Артем Колчин]

Владислав Великоиваненко, в целом да, тоже думал. Но тут вроде палитра красивая
https://prnt.sc/sx4sYQJxsUNh
Поэтому хотел с ней заморочиться...
может надо с переменной this повозиться?

[Владислав Великоиваненко]

Артем Колчин,

$(document).on('click','.название класса', function() {
  $(this).remove();
});

[Newto]

Владислав Великоиваненко, подскажите, а input type=color вроде на IOS не поддерживался? Или уже работает?

[Артем Колчин]

Владислав Великоиваненко, в общем послушал ваш совет, сделал просто инпут и все отлично без танцев с бубном с jquery и другими библиотеками. Благодарю, не знал об этом типе.

[Владислав Великоиваненко]

Newto, тык