Forum PHP.pl

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 
function show_sidebar(id){
		var $ = jQuery;
		jQuery('input[name="intencje_mszalne"]').change(function(){
			jQuery(this).parent().parent().find(".check-list").removeClass("check-list");
			jQuery(this).siblings("label").children("#check-list").addClass("check-list");
		});
		if ( id == 'Indywidualna'){
			jQuery("#wybierz").show();
			jQuery("#termin_data").hide();
			jQuery("#pole_wpisu").hide();
		}
		else if ( id == 'gregorianskie'){
			jQuery("#wybierz").hide();
			jQuery("#termin_data").show();
			jQuery("#pole_wpisu").show();
		}
		else if ( id == 'zbiorowa'){
			jQuery("#wybierz").hide();
			jQuery("#termin_data").hide();
			jQuery("#pole_wpisu").show();
		}
 
	}
[JAVASCRIPT] pobierz, plaintext 

Ten post edytował pawel06281990 12.02.2022, 21:03:47

Powinno być raczej:

[HTML] pobierz, plaintext 
.children(".check-list")
[HTML] pobierz, plaintext 

Pokaż HTML

Tak wygląda html we function

[PHP] pobierz, plaintext 
function form_radio_image(array $options = []){
 
 
	$default_options = [
	'type'          =>'radio',
	'name'        =>'',
	'value'        =>'',
	'id'            =>'',
	'image_active'  =>'',
	'image_hover'  =>'',
	'onclick'      =>''
	];
	$options += $default_options;
 
	$radio_image ='<div class="meta-input">';
	$radio_image .="<div class='radio-image-wrapper'>";
   $radio_image .="<input ".$options['onclick']." type='radio' name='".$options['name']."' class='radio ".$options['name']."' value='".$options['value']."' id='".$options['id']."' />";
    $radio_image .='<label for="'.$options['id'].'">';
   $radio_image .=  '<span class="ss"><img src="'.ZAMOW_MSZE_PATH.'/assets/images/'.$options['image_active'].'" /></span>';
   $radio_image .=  '<span id="check-list"><img src="'. ZAMOW_MSZE_PATH.'/assets/images/'.$options['image_hover'].'" /></span>';
   $radio_image .= "</label>";
   $radio_image .="</div>";
	 $radio_image .="</div>";
 
	return $radio_image;
 
 
}
[PHP] pobierz, plaintext 

Nie widzę nigdzie klasy
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:
Możesz to zrobić przecież krócej i szybciej:

Ten post edytował Salvation 13.02.2022, 20:17:25

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

Nigdzie w tym kodzie nie widzę klasy. Jest identyfikator.

Wg mnie, DOM też jest do poprawy, bo ten `label` jako parent dla `img` nie wnosi nic semantycznego.

Gotowiec:

Demo: https://codepen.io/n3veR/pen/dyZzgzy

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.

dla wyjaśnienia działania dodam css

[CSS] pobierz, plaintext 
.meta-input{
	float: left;
	margin-bottom: 10px !important;
	margin-right: 30px !important;
	margin-left: 20px !important;
	margin-top: 20px !important;
}
 
.radio-image-wrapper{
	float: left;
	position: relative;
	margin-right: 15px;
}
.radio-image-wrapper input{
	position: absolute;
	top: 0px;
	left: 0px;
	opacity: 0;
	filter: alpha(0);
	height: 21px;
}
 
 
.check-list{
	top: 0px;
	width: 201px;
	height: 65px;
	position: absolute;
	left:0px;
	margin-left: 19px;
margin-top: 9px;
 
}
.check-list-termin{
	top: 0px;
	width: 201px;
	height: 65px;
	position: absolute;
	left:0px;
	margin-left: 29px;
margin-top: 10px;
 
}
 
.radio{
	width:16px;
	height:17px;
	background:url(../images/radio.png) no-repeat;
	display:block;
	clear:left;
	float:left;
	margin-right:10px;
}
 
#check-list img{
display:none;
}
.check-list-termin img, .check-list img{
display:block !important;
}
[CSS] pobierz, plaintext 

Po kliknięciu w obrazek rozwija się kolejne pole do wyboru i jest oznaczony innym obrazkiem z ramkami.

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.

Posprawdzałem kod i naprawiłem błąd który miałem w kodzie żeby efekt był widoczny musiałem usunąć

[HTML] pobierz, plaintext 
<div class="row">
 
<div class="col-3">
 
</div>
</div>
 
[HTML] pobierz, plaintext 

Po usunąciu tego kod działa poprawnie tak jak miał działać dzięki za pomoc problem rozwiązałem.

Ten post edytował pawel06281990 14.02.2022, 13:33:54