Как сделать смену картинок на jquery с помощью радиокнопок?

Question

[Антон]

https://codepen.io/anon/pen/exzgwo
Есть бесчисленное количество item.
В каждом item от 1 до 7 элементов (ссылка с картинкой), в примере по 3.
В каждом item нужно показывать только один первый элемент при загрузке страницы, а радиокнопками их затем переключать.

Answer 1

[0xD34F]

.images_box a {
  display: none;
}

.images_box a.active {
  display: inline;
}

const containerSelector = '.items-list-item-wrapper';
const buttonSelector = '.items-list-item-colors input';
const contentSelector = '.images_box a';
const activeClass = 'active';


// jquery, как вы и хотели
$(containerSelector).on('change', buttonSelector, function(e) {
  $(contentSelector, e.delegateTarget)
    .removeClass(activeClass)
    .eq($(buttonSelector, e.delegateTarget).index(this))
    .addClass(activeClass);
}).each((i, n) => $(buttonSelector, n).first().click());

// или, к чёрту jquery
document.querySelectorAll(containerSelector).forEach(n => {
  n.addEventListener('change', onChange);
  n.querySelector(buttonSelector).click();
});

function onChange({ target: t }) {
  if (t.matches(buttonSelector)) {
    const buttons = this.querySelectorAll(buttonSelector);
    const index = Array.prototype.indexOf.call(buttons, t);
    this.querySelectorAll(contentSelector).forEach((n, i) => {
      n.classList.toggle(activeClass, i === index);
    });
  }
}