Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [JS]jQuery konwersja na JS
topcio
post 15.10.2018, 04:11:07
Post #1





Grupa: Zarejestrowani
Postów: 140
Pomógł: 0
Dołączył: 14.01.2017

Ostrzeżenie: (0%)
-----


Witajcie, czy mogę prosić by poniższy skrypt napisać w czystym JS, jakoś sam nie potrafię tego zrobić.

  1. $(document).off('click.choose_item');
  2. $(document).on('click.choose_item', '.choose_item', function () {
  3. $('.choose_item').not($(this)).removeClass('open');
  4. $(this).toggleClass('open');
  5. });
  6. $(document).on('click.choose_item', function (event) {
  7. if ($(event.target).closest('.choose_item').length === 0) {
  8. $('.choose_item').removeClass('open');
  9. }
  10. });
Go to the top of the page
+Quote Post
markuz
post 15.10.2018, 10:34:53
Post #2





Grupa: Zarejestrowani
Postów: 1 240
Pomógł: 278
Dołączył: 11.03.2008

Ostrzeżenie: (0%)
-----


Poczytaj o:
https://developer.mozilla.org/pl/docs/Web/A...t/querySelector
https://developer.mozilla.org/pl/docs/Web/A...ddEventListener
https://developer.mozilla.org/pl/docs/Web/A...ement/classList


--------------------
Go to the top of the page
+Quote Post
viking
post 15.10.2018, 10:41:39
Post #3





Grupa: Zarejestrowani
Postów: 6 365
Pomógł: 1114
Dołączył: 30.08.2006

Ostrzeżenie: (0%)
-----


Problemem tutaj będzie namespace. Musiałbyś stworzyć klasę lub obiekt do przechowywania zdarzeń.


--------------------
Go to the top of the page
+Quote Post
topcio
post 15.10.2018, 14:23:17
Post #4





Grupa: Zarejestrowani
Postów: 140
Pomógł: 0
Dołączył: 14.01.2017

Ostrzeżenie: (0%)
-----


no właśnie tak zrobiłem Viking
  1. const test = [...document.querySelectorAll('.choose_item')];
  2.  
  3. const tablica = {
  4. defaultImage: "<img class=\"item_grades\" src='images\\Frames\\[Common]_Item_Frame.png'>",
  5. defaultBackgroundImage: "url('/images/Speed_Up/Choose_Item.png')",
  6. HTML: "",
  7. }
  8.  
  9. function selectDiv() {
  10. if (tablica.HTML == this.dataset.option) {
  11. this.classList.remove('open');
  12. tablica.HTML = "";
  13. this.innerHTML = tablica.defaultImage;
  14. this.style.backgroundImage = tablica.defaultBackgroundImage;
  15. document.querySelector('.items_div').style.display = "none";
  16. } else {
  17. tablica.HTML = this.dataset.option;
  18. test.forEach(element => element.classList.remove('open'))
  19. test.forEach(element => element.innerHTML = tablica.defaultImage)
  20. test.forEach(element => element.style.backgroundImage = tablica.defaultBackgroundImage)
  21. this.classList.add('open');
  22. this.innerHTML = "";
  23. this.style.backgroundImage = 'none';
  24. document.querySelector('.items_div').style.display = "flex";
  25. }
  26.  
  27. }
  28.  
  29. test.forEach(element => element.addEventListener('click', selectDiv))
  30.  
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 28.03.2024 - 12:19