Dev Faq
-2
votes

Ajouter la classe à l'extérieur de DIV avec une classe spécifique

Hey, j'essaie d'ajouter une classe à la Div avec une classe "Teaser-fond-1" lorsque je tiers la classique avec "Teaser-Item Item-1" classe ou quand je survole "Item-2" puis ajoutez un Classe à la DIV avec "Teaser-Item Item-2".

HTML H1> 
$thisClass = $(this).find("div[class^=item-]").attr('class');
$('.owl-item').hover(function(){
   $(this).parents('.teaser-home-container').find($thisClass).addClass('hover');
};

1 commentaires

ATTR ('Classe') va retourner quelque chose comme Teaser-Item Item-1 . Et Rechercher (Teaser-Item Item-1) est un sélecteur invalide ultérieurement.

3 Réponses :

0
votes 
$('.teaser-item.item-1').hover(function() {
    $('.teaser-background.item-1').addClass('hover');
});
$('.teaser-item.item-2').hover(function() {
    $('.teaser-background.item-2').addClass('hover');
});
0 commentaires
0
votes

Cela pourrait faire le travail pour vous, juste en identifiant les divs par ID 

<script type="text/javascript">
        $(document).ready(function(){
            $(".teaser-item").hover(function(){
                var id = this.id;
                $("#hover"+id).addClass("hover");

            });
        });
    </script>

        <div class="teaser-home-container">
           <div class="teaser-home owl-carousel owl-theme">
              <div class="owl-item">
                 <div class="teaser-item" id="item-1">Item1</div> 
              </div>
              <div class="owl-item">
                 <div class="teaser-item" id="item-2">Item2</div> 
              </div>
           </div>
           <div class="teaser-home--background">
              <div class="teaser-background" id="hoveritem-1">Hitem1</div>
              <div class="teaser-background" id="hoveritem-2">Hitem2</div>
           </div>
        </div>

0 commentaires
0
votes

Ce n'est pas une bonne idée de travailler avec des classes dans votre cas .. Il peut être fait en utilisant data ​​code> attribut

vous pouvez commencer à partir d'ici sup> p >

p> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="teaser-home-container">
   <div class="teaser-home owl-carousel owl-theme">
      <div class="owl-item">
         <div class="teaser-item" data-item="1">Item 1</div> 
      </div>
      <div class="owl-item">
         <div class="teaser-item" data-item="2">Item 2</div> 
      </div>
   </div>
   <div class="teaser-home--background">
      <div class="teaser-background" data-bg="1">Bg 1</div>
      <div class="teaser-background" data-bg="2">Bg 2</div>
   </div>
</div>

0 commentaires

Articles qui pourrait vous intéresser :

Select2 ne s'affiche pas correctement dans le mode bootstrap
datetimepicker ne fonctionne pas avec bootstrap 4?
L'appel Ajax n'affiche pas de réponse en cas de succès
django admin - Comment ajouter du javascript à la fin d'un fichier