Как я мог оптимизировать это jquery?

Question

Я написал некоторый код JS, чтобы изменить стиль CSS одного элемента при наведении другого. У меня есть 6 пар элементов. Очевидно, что есть лучший способ его кодирования. Пожалуйста, помогите мне. Сайт использует Worpdress.

(function($) {
  $(document).ready(function() {
    $('.img-zink').hover(function() {
      $('#btn-zink').attr('style', 'background-color: #4aab61; color: white !important');
    }, function() {
      $('#btn-zink').attr('style', '');
    });

    $('.img-rist').hover(function() {
      $('#btn-rist').attr('style', 'background-color: #4aab61; color: white !important');
    }, function() {
      $('#btn-rist').attr('style', '');
    });

    $('.img-start').hover(function() {
      $('#btn-start').attr('style', 'background-color: #4aab61; color: white !important');
    }, function() {
      $('#btn-start').attr('style', '');
    });

    $('.img-humat').hover(function() {
      $('#btn-humat').attr('style', 'background-color: #4aab61; color: white !important');
    }, function() {
      $('#btn-humat').attr('style', '');
    });

    $('.img-bor').hover(function() {
      $('#btn-bor').attr('style', 'background-color: #4aab61; color: white !important');
    }, function() {
      $('#btn-bor').attr('style', '');
    });

  });
}(jQuery));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

Вы можете добавить следующее css

.active {
   background-color: #4aab61;
   color: white !important;
 }

и затем переключить класс следующим образом для всех элементов в одной hover() функции:

 $('.img-zink, .img-rist, .img-start, .img-humat, .img-bor').hover(function() {
   let className = $(this).attr("class").substr(3);
   $('#btn' + className).toggleClass("active");
 });