• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Zdrapka w js na podstawie tabeli. Odkrywanie konkretnego pola po kliknieciu.

0 głosów
125 wizyt
pytanie zadane 17 czerwca 2018 w JavaScript, jQuery, AJAX przez Pasioo Nowicjusz (240 p.)

Z nudów zacząłem pisać jakąś tabelkę i doszło do tego że zacząłem robić "zdrapkę" więc uprzedzam, że sam HTML może być nieodpowiedni do tego zadania, bo nie pisałem go z myślą o dodawaniu do niego skryptu (tak tylko piszę :] )

Zrobiłem dwie tabelki, jedna nałożona na drugą. Mam gotowy skrypt losujący gdzie znajduje się wygrane pole. Problem jest taki, że nie wiem jak ukrywać kliknięte komórki tabeli. Próbowałem EventListener i zmianę opacity na 0 ale znikały mi wszystkie komórki po kliknięciu w którąkolwiek :D 

Kod HTML CSS i JS

komentarz 17 czerwca 2018 przez JSHolic Szeryf (78,620 p.)

Próbowałeś z visibility: hidden?

komentarz 17 czerwca 2018 przez Pasioo Nowicjusz (240 p.)
edycja 17 czerwca 2018 przez Pasioo

Nie. Dodam, że nie wiem czy to, że dałem do body "onload" jest dobrze. Nie bardzo wiem jak ma wyglądać skrypt usuwający kliknięte pole. Czy użycie 

document.addEventListener("DOMContentLoaded", function () {   funkcja-do-ukrywania ()  {}   });

q=getElementById("a").getElementsByTagName("td");

q.addEventListener("click", // i tu cos dalej zwiazane z opacity:0 ale nie pamietam calosi

jest dobre. Ogólnie miałem jakiś pomysł ale nie działał. Ukrywał mi wszystkie <td> po kliknięciu w jeden. Nie mam niestety tego kodu który tak działał bo sobie go nie zapisałem, a nie mam już teraz siły na to, żeby go spróbować napisać tak jak wcześniej.

To co napisałem teraz jest mniej więcej tym co mi działało tak jak wcześniej pisałem.

1 odpowiedź

+1 głos
odpowiedź 17 czerwca 2018 przez JSHolic Szeryf (78,620 p.)
wybrane 17 czerwca 2018 przez Pasioo
 
Najlepsza

W JavaScript złap tabelę o id="a" i na click dodaj klikniętemu elementowi klasę np. hide:

document.getElementById('a').addEventListener('click', function(ev) {
  ev.target.classList.add('hide');
})

W CSS nadaj tej klasie styl visibility: hidden

.hide {
  visibility: hidden;
}

 

komentarz 17 czerwca 2018 przez Pasioo Nowicjusz (240 p.)

Czyli target odpowiada za złapanie tego konkretnego klikniętego pola tak? Sprawdzę to kiedy tylko przysiądę do kompurera

komentarz 17 czerwca 2018 przez Pasioo Nowicjusz (240 p.)

Dopisałem to 

document.addEventListener("DOMContentLoaded", function (){
	document.getElementById('a').addEventListener('click', function(ev) {
	ev.target.classList.add('hide');
	});
});

I teraz jeszcze jedno. Kiedy ukrywam kliknięciem <td> następne klikniecie w tym samym miejscu ukrywa mi całą tabelę z id="a", bo klikam w nią chcąc nie chcąc.

Dodałem if ale nic się nie dzieje. Błędu w konsoli też nie ma więc myślę, że sprawdzam zły warunek. Czy to ma szanse tak działać?

document.addEventListener("DOMContentLoaded", function (){
	q=document.getElementById('a');
	t=q.getElementsByTagName(q);
		if(t=="td"){
					q.addEventListener('click', function(ev) {
					ev.target.classList.add('hide');
					});
		
					};
});

I tak właściwie to dziękuję bo rozwiązanie podstawowego problemu dostałem :]

komentarz 17 czerwca 2018 przez JSHolic Szeryf (78,620 p.)

Problemem jest wyższy z-index dla tabeli #a, w której komórki klikasz, żeby zniknęły. Tabela ta znajduje się "nad" tabelą z class="l". Można próbować bawić się w zmianę z-index podczas obsługi zdarzeń, ale ja bym zrobił to na jednej tabeli, gdzie oba kółka umieściłbym w jednym rzędzie i kolumnie i na akcje wykonywane myszką dynamicznie je pokazywał/ukrywał.

Podobne pytania

0 głosów
3 odpowiedzi 103 wizyt
pytanie zadane 1 maja 2018 w JavaScript, jQuery, AJAX przez GracjanDogg Użytkownik (840 p.)
0 głosów
0 odpowiedzi 53 wizyt
pytanie zadane 23 maja 2017 w PHP, Symfony, Zend przez Zbigniew Andrysiak Bywalec (2,400 p.)
+1 głos
2 odpowiedzi 150 wizyt
Porady nie od parady
Zadając pytanie postaraj się o odpowiedni tytuł, kategorię oraz tagi.Tagi

64,846 zapytań

111,307 odpowiedzi

234,117 komentarzy

46,718 pasjonatów

Przeglądających: 197
Pasjonatów: 12 Gości: 185

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...