L_B_A
@L_B_A

Как реализовать подмену картинки и обратно на jQuery?

Вот пример кода CodePen
Как сделать так, чтобы при клике на кнопку раскрытия таблиц менялась иконка:
5e7a242b67710224986672.jpeg
нашел пример, но в этом случае он не работает:
5e7a24d2c48e2327272546.jpeg

Вот ссылки иноконок на которые нужно заменить:
https://habrastorage.org/webt/5e/7a/18/5e7a18b3252... - collapse all
https://habrastorage.org/webt/5e/7a/1a/5e7a1a0febe... - collapse one

И когда открываем одну табличку:
5e7a270757327697185343.jpeg
а потом открываем все, то эта открытая табличка сворачивается:
5e7a27380177c321850338.jpeg

Подскажите, пожалуйста, решения
  • Вопрос задан
  • 61 просмотр
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
const icons = {
  one: [ 'url иконки раскрытия одного элемента', 'и закрытия' ],
  all: [ 'url иконки раскрытия всех', 'что здесь должно быть, думаю догадаетесь' ],
};

const getState = el => $(el)
  .closest('.team__info-worklog')
  .find('.worklog-table')
  .get()
  .map(n => $(n).is(':visible'));

const setState = (el, state) => $(el)
  .closest('.team__info-worklog')
  .find('.worklog-table').each((i, n) => $(n)[state[i] ? 'slideDown' : 'slideUp']()).end()
  .find('.worklog-expend-all img').attr('src', icons.all[+state.some(Boolean)]).end()
  .find('.worklog-list__expend img').attr('src', i => icons.one[+state[i]]);

const createUpdater = f => e => setState(e.target, f(getState(e.target), e));


$('.worklog-expend-all').on('click', createUpdater(state => {
  return Array(state.length).fill(!state.some(Boolean));
}));

$('.team__info-worklog').on('click', '.worklog-list__expend', createUpdater((state, e) => {
  const index = $(e.target).closest('.worklog-list__row').index();
  return state.map((n, i) => i === index ? !n : n);
}));
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы