Блог

При возникновении этого события я получаю сообщение об ошибке консоли «нераспознанное выражение: .». Все это работает нормально, поэтому я не уверен, в чем дело, кроме синтаксической ошибки. Есть идеи?

  $(".home-focus__services__list").on('mouseover', 'a', function(){
    const aClass = $(this).attr("class").split(/s /);
    const serviceObjectPhoto = aClass.filter(function(e) { 
        return e.indexOf("service-") > -1;
    });
    $(".home-focus__services__photo").children("."   serviceObjectPhoto).css({
        'opacity': '1'
    }
 

Я предполагаю, что ошибка связана с

  .children("."   serviceObjectPhoto).css ///////
 

Но я не знаю, как решить «проблему».

Вы ищете класс. Вы используете фильтр, который вернет массив совпадающих элементов. Вы могли бы заставить свою работу ссылаться на первый индекс массива, но нет причин продолжать поиск, как только вы найдете элемент.

Вы хотите использовать find(), который вернет значение, соответствующее

 const serviceObjectPhoto = aClass.find(function(e) { 
    return e.indexOf("service-") > -1;
});
 

В моем ответе есть несколько предположений.

Но вы можете прикрепить прослушиватель событий к любой ссылке с классом service , начинающимся с. Затем установите для всех фотографий значение непрозрачности 0, затем используйте класс из ссылки, чтобы изменить соответствующую группу фотографий на непрозрачность 1.

 $(".home-focus__services__list").on('mouseover', 'a[class^=service]', function() {
  $(".home-focus__services__photo div[class^=service]").css({
    "opacity": 0
  });
  
  $(".home-focus__services__photo ."   $(this).prop("class")).css({
    'opacity': '1'
  });
}); 

 div[class^=service] {
  opacity: 0
} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="home-focus__services__list">
  <a class="service-1" href="">Service 1</a>
  <a class="service-2" href="">Service 2</a>
  <a class="service-3" href="">Service 3</a>
</div>

<div class="home-focus__services__photo">
  <div class="service-1">1</div>
  <div class="service-2">2</div>
  <div class="service-3">3</div>
</div>