Zamiana zdjęc na kafelkach i kontentu po kliknięciu w JavaScript

pytanie zadane 18 grudnia 2018 w JavaScript przez wanderer Gaduła (3,710 p.)

Cześć,
mam do Was pytanie,
w jaki sposób można zrobić cos takiego:
Mam 9 kafelek w gridzie i po prawej strony miejsce na kontent. Każda kafelka to zdjecie/ikona 150x 150px. Po najechaniu na 'Kafelkę1' ma ona zmieniac swoj kolor (hover, np. podmieniac się zdjecie) . Natomiast po kliknięciu w 'Kafelkę1' ma zostawac ten zmieniony kolor (podmienione zdjecie) oraz ma zmienic się kontent po prawej na ten przypisany do kafelki1. Gdyby ktos kliknął w 'kafelkę3' to zapala się kafelka3 i wyswietla sie kontent dla kafelki3.
Próbowalem to robić na zasadzie włączania i wyłączania pozostałych kafelek w js .style.display = blockstyle.display=none ale na dluzsza mete to jest słabe rozwiązanie.

1 odpowiedź

odpowiedź 18 grudnia 2018 przez Tomek Sochacki Ekspert (227,490 p.)

W takim najprostszym rozwiązaniu to po prostu zrób sobie tablicę, zawierającą dane tych obrazków (url, title, alt itp.) i przeiteruj po niej generując dynamicznie te kafelki. Następnie nasłuchuj na kliknięcie w kafelka (np. ustaw event na container i sprawdzaj kliknięty element - event delegation) i pobieraj dane tego klikniętego elementu i względem nich ustawiaj content + to wyróżnienie w CSS.

Niezbyt wiem z czym dokładnie masz problem, bo nie dałeś żadnego kodu... Wrzuć na codepen co naskrobałeś i napisz konkretnie co Ci nie działa.

komentarz 18 grudnia 2018 przez Tomek Sochacki Ekspert (227,490 p.)

Tu masz na szybko na kolanie naskrobany codepen: https://codepen.io/anon/pen/PXbYqb

Oczywiście to tylko pokazanie jakiegoś jednego ze sposobów, kod trzeba by dopracować i zrobić porządniej, ale wydaje mi się, że jako koncepcja to jest to wręcz gotowiec.

komentarz 18 grudnia 2018 przez wanderer Gaduła (3,710 p.)
edycja 18 grudnia 2018 przez wanderer

Dziekuje, proszę powiedz mi jak przepisac to na zwykly css?:
&:hover {
    cursor: pointer;
    background-color: blue;
  }
  &--active {
    border: 10px solid green;
    background-color: blue;
  }

EDIT:
już przepisałem sobie:
.item {
  width: 50px;
  height: 50px;
  background-color: red;
  margin-right: 2rem;

  }
  .item:hover {
    cursor: pointer;
    background-color: blue;
  }
  .item--active {
    border: 10px solid green;
    background-color: blue;
  }

komentarz 18 grudnia 2018 przez Tomek Sochacki Ekspert (227,490 p.)

Nie przepisu, poczytaj dokumentację scss, to proste, szybko się nauczysz, a jest to dziś standard :)

komentarz 18 grudnia 2018 przez wanderer Gaduła (3,710 p.)

Jakbym chciał dodawać zamiast kolorów zdjęcia , bo mam gotowe kafelki z ikonami 150x150 to mam je dodawać jako img scr jakos czy jako bachround-image i dawac height i width tych kafelek na sztywno z @media rule?

komentarz 18 grudnia 2018 przez Tomek Sochacki Ekspert (227,490 p.)

a to już zależy, tu lepiej niech się wypowiedzą spece od CSS bo ja akurat w CSS i zabawy z layoutem to jestem cieniutki.. uciekam od tego jak się da :) (i pisze to Frontend :D)

komentarz 19 grudnia 2018 przez wanderer Gaduła (3,710 p.)

Przeanalizowałem to i kontent jaki wyświetla się po prawej stronie jest słowem które jest wpisane w const data = [{text: 'jeden'}, {text: 'dwa'}, {text: 'trzy'}]; Co w momencie gdy chcę by do kafelki1 był przypisany kontent 1 , a kontent1 miałby być divami z obrazkami?

komentarz 19 grudnia 2018 przez Tomek Sochacki Ekspert (227,490 p.)

textContent to tylko przyklad, ja Ci dalem gotowca co do idei, a co ty tam wsadzisz w te kafelki to juz od Ciebie zalezy... poczytaj o manipulacji DOM w js.

komentarz 19 grudnia 2018 przez wanderer Gaduła (3,710 p.)

Musze przyznać nie znam się tak na tym, natrafiłem na htmlContent ale jak do tego mam np umieszczać całe gridy z divów?
Nie bardzo rozumiem jak to można zrobić