Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]Dodawanie klasy do klikniętego elementu
Forum PHP.pl > Forum > Przedszkole
trifek
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
trifek
  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/
viking
No i napisałem ci jak to zrobić. this oznacza body. To są podstawy JS które trzeba poznać.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.