Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [JavaScript]Dodawanie klasy do klikniętego elementu
trifek
post 16.07.2020, 13:03:13
Post #1





Grupa: Zarejestrowani
Postów: 340
Pomógł: 0
Dołączył: 28.09.2015

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


Witam serdecznie,
Mam taki moduł: http://serwer1356363.home.pl/_nauka/

Po kliknięciu na pozycje w popupie chciałbym żeby:
1. Do klikniętego elementu dodała się "ramka" (klasa selected-material) - w popupie
2. Zaznaczyła się wybrana opcja w select (to działa)
3. Popup zamknął się (to działa).

Mam 2 selekty i chciałbym żeby to wybieranie (oznaczanie ramkami )

Mój kod JS wygląda następująco:
  1. $('body').on('click', '.select-material-body', function(e) {
  2. if($('.material-type-input').val() == 1){
  3. $(".select-material").removeClass("selected-material");
  4. $(this).addClass("selected-material");
  5. $('select[name=product-material-body]').val($(this).attr('id'));
  6. $('.product-material-body').selectpicker('refresh');
  7. $('#material-dialog-modal').modal('hide');
  8. } else{
  9. $(".select-material").removeClass("selected-material");
  10. $(this).addClass("selected-material");
  11. $('select[name=product-material-front]').val($(this).attr('id'));
  12. $('.product-material-front').selectpicker('refresh');
  13. $('#material-dialog-modal').modal('hide');
  14. }
  15. });


Html:
  1. <div id="material-dialog-modal" class="modal fade" role="dialog">
  2. <div class="modal-dialog">
  3. <div class="modal-content">
  4. <div class="modal-header">
  5. <button type="button" class="close" data-dismiss="modal">&times;</button>
  6. </div>
  7. <div class="modal-body pt-0">
  8. <h3 class="select-material-title px-3"></h3>
  9. <form method="get" action="getMaterials" class="px-3 select-material-url">
  10. <input type="hidden" name="type" value="" class="material-type-input">
  11. <div class="inner-addon rounded-0 modal-search-form">
  12. <i class="fa fa-search"></i>
  13. <input type="text" class="form-control product-query-string-body"
  14. placeholder="Szukaj produktu" aria-label="Wpisz nazwę lub kod koloru" name="query"
  15. value="" />
  16. </div>
  17. </form>
  18. <div class="row material-list px-5 pt-4 dynamic-materials">
  19.  
  20. </div>
  21. </div>
  22. </div>
  23.  
  24. </div>
  25. </div>


Wie ktoś może jak to zrobić?

Bardzo proszę o pomoc
Go to the top of the page
+Quote Post
viking
post 16.07.2020, 13:15:27
Post #2





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

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


https://prophp.pl/article/28/propagacja_i_d...en_w_javascript


--------------------
Go to the top of the page
+Quote Post
trifek
post 16.07.2020, 13:20:03
Post #3





Grupa: Zarejestrowani
Postów: 340
Pomógł: 0
Dołączył: 28.09.2015

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


  1. $('body').on('click', '.select-material-body', function(e) {
  2. if($('.material-type-input').val() == 1){
  3. $(".select-material").removeClass("selected-material");
  4. $(this).addClass("selected-material");
  5. $('select[name=product-material-body]').val($(this).attr('id'));
  6. $('.product-material-body').selectpicker('refresh');
  7. $('#material-dialog-modal').modal('hide');
  8. } else{
  9. $(".select-material").removeClass("selected-material");
  10. $(this).addClass("selected-material");
  11. $('select[name=product-material-front]').val($(this).attr('id'));
  12. $('.product-material-front').selectpicker('refresh');
  13. $('#material-dialog-modal').modal('hide');
  14. }
  15. });



Mam dodane akcje po kliknięciu.... Tylko zamykanie modela i oznaczanie selecta - działa poprawnie, a oznaczanie ramką (dodanie wspomnianej powyżej klasy) - już nie.

Zobacz proszę "na żywo" podgląd: http://serwer1356363.home.pl/_nauka/
Go to the top of the page
+Quote Post
viking
post 16.07.2020, 13:47:37
Post #4





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

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


No i napisałem ci jak to zrobić. this oznacza body. To są podstawy JS które trzeba poznać.


--------------------
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 - 13:05