11528 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Sélectionner ID = classe

Bonjour,

je bloque sur un petit bout de code. Voici mon html 
<div id="maisonvide"></div>
<div id="item-e">
	<img class="item item-e chauffage" src="#CHEMIN{img/chauffage/chauffage.svg}" width="270px" alt="">
	<img class="item item-e lampe1" src="#CHEMIN{img/chauffage/lampe1.svg}" width="45px"  alt="">
	<img class="item item-e lampe2" src="#CHEMIN{img/chauffage/lampe2.svg}" width="45px"  alt="">
</div>


Je souhaite qu'au survol d'une classe "item-e" je puisse ajouter une classe "active" aux éléments n'ayant pas le même id "item-e" que l'élément parent. Car plus tard il va il y avoir d'autres div et le but est que les éléments non actifs aient une opacité à 0.5

<script type="text/javascript">
	$(function() {
    $('.item').hover(
		
    function() {
        $(this).addClass('hover');
	var divId = $(this).data('class');
        $('#' + divId).addClass('active');
    },
        
    function(){ 
        $(this).removeClass('hover');
    }
        
    );

    $('.item.hover').trigger('mouseenter');    
});
</script>


Merci pour votre aide Smiley smile
Modérateur
Salut !

J'ai pas compris grand chose... est-ce qu'on pourrait avoir la structure finale de ton HTML stp ? parceque la tout les éléments on la classe item-e comme l'id du parent.
Oui effectivement ce n'est pas très clair... Voici un exemple.


<section id="maison">
<div id="vide"></div>
<div id="item-e">
	<img class="item item-e chauffage" src="#CHEMIN{img/chauffage/chauffage.svg}" width="270px" alt="">
	<img class="item item-e lampe1" src="#CHEMIN{img/chauffage/lampe1.svg}" width="45px"  alt="">
	<img class="item item-e lampe2" src="#CHEMIN{img/chauffage/lampe2.svg}" width="45px"  alt="">
</div>
<div id="item-c">
	<img class="item item-c chauffage" src="#CHEMIN{img/chauffage/chauffage.svg}" width="270px" alt="">
	<img class="item item-c lampe1" src="#CHEMIN{img/chauffage/lampe1.svg}" width="45px"  alt="">
	<img class="item item-c lampe2" src="#CHEMIN{img/chauffage/lampe2.svg}" width="45px"  alt="">
</div>
<div id="item-b">
	<img class="item item-b chauffage" src="#CHEMIN{img/chauffage/chauffage.svg}" width="270px" alt="">
	<img class="item item-b lampe1" src="#CHEMIN{img/chauffage/lampe1.svg}" width="45px"  alt="">
	<img class="item item-b lampe2" src="#CHEMIN{img/chauffage/lampe2.svg}" width="45px"  alt="">
</div>
</section>


Je survole une image "item-e" ---> ajout de la classe "off" à la div "item-c" et "item-b", car l'id n'est pas égale à la classe survolée. Est-ce plus clair ? Smiley sweatdrop
Ah oui de ce genre là Smiley smile Ça marche super ! Je change juste le .css par addClass Smiley smile Merci beaucoup !

$(function() {
    $('.item').hover(
		
    function() {
        $(this).addClass('hover');
		$idParent = $(this).parent().attr('id');
      	$otherDiv = $("#maison > div:not(#"+$idParent+")");
       	$otherDiv.css('opacity', 0.5);
		$otherDiv.addClass('youpi');
        $('#vide').addClass('off');
    },
        
    function(){ 
        $(this).removeClass('hover');
		$('.item').removeClass('hover');
        $('#vide').removeClass('off');
		$("#maison > div").removeClass('youpi');
    } 
    );
    $('.item.hover').trigger('mouseenter');    
});

Modifié par Lettynoo (11 Apr 2022 - 17:03)
Ça marche bien pour les div de type item-x, j'ai bien le "youpi" pour ceux dont une de leur image enfant n'est pas survolée.
Modifié par Lettynoo (02 May 2022 - 15:22)
Sujet clos
Aller à