CODEWITHSUNDEEP
javascripthtmljquerycsshover
Raif Deari
Raif Deari

Reputation: 21

Dynamic jquery. How to apply jquery only to certain elements?

Hey guys I am doing a simple hover color change however I found myself repeating jquery can it be done so that when btn is hovered the corresponding service-icon changes color? Without repeating as below.

$(document).ready(function() {
    $('.btn-1').hover(function() {
        $('.service-icon-1').css('color', '#05FAB8');
    },function(){
        $('.service-icon-1').css('color', '');
    });
});
$(document).ready(function() {
    $('.btn-2').hover(function() {
        $('.service-icon-2').css('color', '#05FAB8');
    },function(){
        $('.service-icon-2').css('color', '');
    });
});
$(document).ready(function() {
    $('.btn-3').hover(function() {
        $('.service-icon-3').css('color', '#05FAB8');
    },function(){
        $('.service-icon-3').css('color', '');
    });
});

Upvotes: 0

Views: 36

Answers (3)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

Without your HTML, chances are that my snippet may be unrelevant. I assume the icons are not child of each button because that would be too easy.

Using JS, I would use a data-attribute to store the service number on both button and icon... and use that data attribute value in an attribute selector.

Notice the usage of template litteral: backticks ` and ${}. 

$(document).ready(function() {
    $('.btn').hover(function() {
        let serviceNb = $(this).data("service")
        $(`.service-icon[data-service=${serviceNb}]`).css('color', '#05FAB8');
    },function(){
        let serviceNb = $(this).data("service")
        $(`.service-icon[data-service=${serviceNb}]`).css('color', '');
    });
});
div{
  margin: 1em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <span class="service-icon" data-service="1"><i class="fa fa-tools"></i></span>
  <span class="service-icon" data-service="2"><i class="fa fa-hand-holding-usd"></i></span>
  <span class="service-icon" data-service="3"><i class="fa fa-trash"></i></span>
</div>

<button class="btn"  data-service="1">Repair</button>
<button class="btn"  data-service="2">Sell</button>
<button class="btn"  data-service="3">Trash</button>

Upvotes: 1

lortschi
lortschi

Reputation: 4323

Something like this maybe:

 $(document).ready(function() {
   $('.btn-1, .btn-2, .btn-3').hover(function() {
      if ($(this).is('.btn-1')) {
        $('.service-icon-1').css('color', '#05FAB8');
      } else if ($(this).is('.btn-2')) {
        $('.service-icon-2').css('color', '#05FAB8');
      } else {
        $('.service-icon-3').css('color', '#05FAB8');
      }
   },function(){
      $('.service-icon-1, .service-icon-2, .service-icon-3').css('color', '');
   });
});

Upvotes: 0

Neil W
Neil W

Reputation: 9122

1) Put "btn-1", "btn-2, "btn-3" in the ID of your buttons, instead of class.
2) Put a common class in the buttons.  (e.g. "btn")
3) Use $(".btn").hover ONCE
4) Inside you can use $(this).prop("id") to get the actual ID (e.g. "btn-1")
5) Extract the "1" from that ID that you retrieve.  Put it in var btnIdNo.
6) Use $(`.service-icon-{btnIdNo}`).css(blah)

Always try to put unique identifiers in ID instead of CLASS. Keep CLASS for ways to identify a 'type' of element.

Upvotes: 0

Related Questions