将班级添加到具有特定班级的外部div

Question

嘿，当我将div悬停在带有“ teaser-item item-1”类的div或悬停在“ item-2”上时，我尝试将一个类添加到“ teaser-background item-1”的类中div的“ teaser-item item-2”类。

HTML

<div class="teaser-home-container">
   <div class="teaser-home owl-carousel owl-theme">
      <div class="owl-item">
         <div class="teaser-item item-1"></div> 
      </div>
      <div class="owl-item">
         <div class="teaser-item item-2"></div> 
      </div>
   </div>
   <div class="teaser-home--background">
      <div class="teaser-background item-1"></div>
      <div class="teaser-background item-2"></div>
   </div>
</div>

jQuery

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

Answer 1

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

Answer 2

仅通过按ID标识div

，即可为您完成这项工作

<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>

Answer 3

在您的情况下使用类不是一个好主意。可以通过使用data属性来实现

^{您可以从这里开始}

$('.owl-item .teaser-item').hover(function(){
  var GetData = $(this).data("item");
   $(this).closest('.teaser-home-container').find('[data-bg="'+GetData+'"]').addClass('hover');
},
function(){
  $(this).closest('.teaser-home-container').find('[data-bg]').removeClass("hover");
});

.hover{
  background : red;
}

<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>