Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] Nie znika mi klassa
Forum PHP.pl > Forum > Przedszkole
pawel06281990
Wita,

Mam problem z function js bo po kliknięciu w inny element powinna mi zniknąć class a nie znika co jest nie tak. Bo dodawać do daje jak kliknę to pojawia się obrazem z ramką a jak kliknę w inny obrazek o innej nazwie to zdjęcie nie znika a w css masz wszystko podane poprawnie.

[JAVASCRIPT] pobierz, plaintext
  1. function show_sidebar(id){
  2. var $ = jQuery;
  3. jQuery('input[name="intencje_mszalne"]').change(function(){
  4. jQuery(this).parent().parent().find(".check-list").removeClass("check-list");
  5. jQuery(this).siblings("label").children("#check-list").addClass("check-list");
  6. });
  7. if ( id == 'Indywidualna'){
  8. jQuery("#wybierz").show();
  9. jQuery("#termin_data").hide();
  10. jQuery("#pole_wpisu").hide();
  11. }
  12. else if ( id == 'gregorianskie'){
  13. jQuery("#wybierz").hide();
  14. jQuery("#termin_data").show();
  15. jQuery("#pole_wpisu").show();
  16. }
  17. else if ( id == 'zbiorowa'){
  18. jQuery("#wybierz").hide();
  19. jQuery("#termin_data").hide();
  20. jQuery("#pole_wpisu").show();
  21. }
  22.  
  23. }
[JAVASCRIPT] pobierz, plaintext
trueblue
Powinno być raczej:
  1. .children(".check-list")
Salvation
Pokaż HTML
pawel06281990
Tak wygląda html we function

  1. function form_radio_image(array $options = []){
  2.  
  3.  
  4. $default_options = [
  5. 'type' =>'radio',
  6. 'name' =>'',
  7. 'value' =>'',
  8. 'id' =>'',
  9. 'image_active' =>'',
  10. 'image_hover' =>'',
  11. 'onclick' =>''
  12. ];
  13. $options += $default_options;
  14.  
  15. $radio_image ='<div class="meta-input">';
  16. $radio_image .="<div class='radio-image-wrapper'>";
  17. $radio_image .="<input ".$options['onclick']." type='radio' name='".$options['name']."' class='radio ".$options['name']."' value='".$options['value']."' id='".$options['id']."' />";
  18. $radio_image .='<label for="'.$options['id'].'">';
  19. $radio_image .= '<span class="ss"><img src="'.ZAMOW_MSZE_PATH.'/assets/images/'.$options['image_active'].'" /></span>';
  20. $radio_image .= '<span id="check-list"><img src="'. ZAMOW_MSZE_PATH.'/assets/images/'.$options['image_hover'].'" /></span>';
  21. $radio_image .= "</label>";
  22. $radio_image .="</div>";
  23. $radio_image .="</div>";
  24.  
  25. return $radio_image;
  26.  
  27.  
  28. }
Salvation
Nie widzę nigdzie klasy
Kod
.check-list

Więc na 99% nie znalazło elementu, dlatego też nie ma skąd tej klasy zabrać...

Poza tym, nie rozumiem dlaczego po zmianie w `input` odwołujesz się aż do "kontenera" `meta-input` w taki sposób:
Kod
jQuery(this).parent().parent()

Możesz to zrobić przecież krócej i szybciej:
Kod
$(this).closest('.meta-input')
pawel06281990
Class'a ma się pojawić po kliknięciu w element w tym przypadku w zdjęcie i ma być dodawana class'a a jak kliknę w inne zdjęcie to na tym poprzednim zdjęcie aktywne znika a pojawia się na innym
viking
Nigdzie w tym kodzie nie widzę klasy. Jest identyfikator.
Salvation
Wg mnie, DOM też jest do poprawy, bo ten `label` jako parent dla `img` nie wnosi nic semantycznego.

Gotowiec:
Kod
(function(){
  'use strict';

  const $imgs = $(document).find('.radio-image-wrapper img');
  
  $imgs.on('click', function(event) {
    event.preventDefault();
    
    $imgs.removeClass('check-list');
    $(this).addClass('check-list');
  });
})(jQuery);


Demo: https://codepen.io/n3veR/pen/dyZzgzy
trueblue
Efekt, który ma być wynikiem działania tego skryptu (części dotyczącej usuwania i dodawania klas), można osiągnąć w czystym CSS.

pawel06281990
dla wyjaśnienia działania dodam css


  1. .meta-input{
  2. float: left;
  3. margin-bottom: 10px !important;
  4. margin-right: 30px !important;
  5. margin-left: 20px !important;
  6. margin-top: 20px !important;
  7. }
  8.  
  9. .radio-image-wrapper{
  10. float: left;
  11. position: relative;
  12. margin-right: 15px;
  13. }
  14. .radio-image-wrapper input{
  15. position: absolute;
  16. top: 0px;
  17. left: 0px;
  18. opacity: 0;
  19. filter: alpha(0);
  20. height: 21px;
  21. }
  22.  
  23.  
  24. .check-list{
  25. top: 0px;
  26. width: 201px;
  27. height: 65px;
  28. position: absolute;
  29. left:0px;
  30. margin-left: 19px;
  31. margin-top: 9px;
  32.  
  33. }
  34. .check-list-termin{
  35. top: 0px;
  36. width: 201px;
  37. height: 65px;
  38. position: absolute;
  39. left:0px;
  40. margin-left: 29px;
  41. margin-top: 10px;
  42.  
  43. }
  44.  
  45. .radio{
  46. width:16px;
  47. height:17px;
  48. background:url(../images/radio.png) no-repeat;
  49. display:block;
  50. clear:left;
  51. float:left;
  52. margin-right:10px;
  53. }
  54.  
  55. #check-list img{
  56. display:none;
  57. }
  58. .check-list-termin img, .check-list img{
  59. display:block !important;
  60. }



Po kliknięciu w obrazek rozwija się kolejne pole do wyboru i jest oznaczony innym obrazkiem z ramkami.
Salvation
Ponawiam prośbę o wrzucenie _całości_ kodu (HTML, CSS i JS). Najlepiej na codepen czy jsfiddle, bez tego ciężko będzie pomóc. zrozumieć zasadę działania.
pawel06281990
Posprawdzałem kod i naprawiłem błąd który miałem w kodzie żeby efekt był widoczny musiałem usunąć

  1. <div class="row">
  2.  
  3. <div class="col-3">
  4.  
  5. </div>
  6. </div>
  7.  


Po usunąciu tego kod działa poprawnie tak jak miał działać dzięki za pomoc problem rozwiązałem.
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.