Задать вопрос

Как выделять только одну картинку из нескольких?

Есть интернет-магазин, в нем карточка товара с описанием, фото, и несколькими опциями (выбор цвета товара):

<ul class="options-ul">
  <li>
    <input id="option-value-265" class="optionlbl" type="radio" value="265" name="option[346]">
    <label for="option-value-265">
      <img alt="Синий" src="blue-50x50.jpg">
    </label>
    <label for="option-value-265">Синий</label>
  </li>
</ul>

Как с помощью jQuery сделать, чтобы при клике на изображение изменялся класс тэга на checked, но при клике на второе (тэгов li может быть несколько, если у товара несколько вариантов цвета) изменялся класс второго, а у первого восстанавливался старый?

Где-то в глубинах гугла нашел подобное решение:

$('input[name="option[346]"]:radio').on('change', function() {
  $(this).closest('li').toggleClass('checked');
});

Но при таком раскладе по нажатию на чекбокс класс меняется на checked, а при нажатие на второй меняется у второго, но первый остаётся неизменным (т.е. checked не убирается).
  • Вопрос задан
  • 3887 просмотров
Подписаться 5 Оценить Комментировать
Решения вопроса 3
WebSpider
@WebSpider
Например, можно запомнить выбранный элемент в переменной

var currentElement = null; 
$('input[name="option[346]"]:radio').on('change', function() {
  if (currentElement) currentElement.removeClass('checked');
  currentElement = $(this).closest('li').addClass('checked'); 
}); 
Ответ написан
RubaXa
@RubaXa
jsfiddle.net/RubaXa/E9juB/ — demo

$('ul.options-ul').on('change', function (evt){
    // Убираем выделение
    $(this).find('.checked').removeClass('checked', true).prop('checked', false);

    // Добавляем выделение
    $(evt.target).closest('li').addClass('checked');
});
Ответ написан
@DanilaMaster
Можно вот так:
$('ul.options-ul input').on('change', function (){
    $(this).closest('li').addClass('checked').siblings().removeClass('checked');
});
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
spmbt
@spmbt
Тогда уж лучше элегантно
$( function(){
	var selChk = 'li input'; //добавить нужное
	$('ul.class_of_ul').on('change', selChk, function(ev){
	$(ev.delegateTarget).find(selChk).not($(this).addClass('checked') )
		.removeClass('checked').removeAttr('checked');
}); });
Ответ написан
Комментировать
sylord
@sylord
Возможно совсем не в тему, но если к li добавляется класс checked с целью как-то выделить img то можно и на CSS
.optionlbl:checked + label img {

}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы