Проверка, сравнение значений данных и addclass

Question

Я пытаюсь проверить, какой элемент в данный момент находится при наведении, и добавив класс в div с тем же значением данных

<a data-toggle="tooltip" title="Złącze słuchawkowe" data-id="#dialog1"
   class="single-image-item single-image-item-1" href="#" data-value="Headphones Plug">
     <i>1</i>
</a>
<a data-toggle="tooltip" title="Złącze słuchawkowe" data-id="#dialog2"
   class="single-image-item single-image-item-1" href="#" data-value="Charging Port">
     <i>1</i>
</a>

<div class="single-hot-spot-item" data-value="Headphones Plug">
     <span class="hot-spot-single-item hot-spot-item-1">1 </span>
     <p class="hot-spot-item-description">Złącze słuchawkowe</p>
</div>
<div class="single-hot-spot-item" data-value="Charging Port">
     <span class="hot-spot-single-item hot-spot-item-1">1 </span>
     <p class="hot-spot-item-description">Złącze słuchawkowe</p>
</div>

Каков наилучший способ сделать это?

Answer 1

Возможно, вы захотите сохранить индекс <div> атрибутом data-value, а затем используйте jQuery.hover(fn) для переключения.

(function($) {
  // building this can be one-liner, but lazy
  sections = {}
  $('div').each(function() {
    sections[$(this).data('value')] = this;
  });
  $('a').hover(function(event) {
    const section = sections[$(this).data('value')];
    $(section).toggleClass('hover', event.type == 'mouseenter');
  });
}(jQuery));

.hover {
  background-color: blue
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a data-toggle="tooltip" title="Złącze słuchawkowe" data-id="#dialog1"
   class="single-image-item single-image-item-1" href="#" data-value="Headphones Plug">
     <i>1</i>
</a>
<a data-toggle="tooltip" title="Złącze słuchawkowe" data-id="#dialog2"
   class="single-image-item single-image-item-1" href="#" data-value="Charging Port">
     <i>1</i>
</a>

<div class="single-hot-spot-item" data-value="Headphones Plug">
     <span class="hot-spot-single-item hot-spot-item-1">1 </span>
     <p class="hot-spot-item-description">Złącze słuchawkowe</p>
</div>
<div class="single-hot-spot-item" data-value="Charging Port">
     <span class="hot-spot-single-item hot-spot-item-1">1 </span>
     <p class="hot-spot-item-description">Złącze słuchawkowe</p>
</div>

Answer 2

Попробуйте это:

$('a').hover(function(){
       var aVal=$(this).attr('data-value');
       $('.single-hot-spot-item').each(function(){
        $(this).removeClass('hover'); 
        if($(this).attr('data-value')==aVal){
          $(this).addClass('hover');
         }
       });

    });