Question 10899 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Change Background Div of another div on Hover for Dynamic Content – JQuery

I have a list of links and a list of markers which are generated dynamically:

The structure looks like this:

<div>
  <a id="link{{i}}>Link {{i}}</a>
</div>

<div>
  <div id="marker{{j}}">Marker {{j}}</div>
</div>

When the content is dynamically generated – it will end up looking like this:

<div>
  <a id="link1">Link 1</a>
  <a id="link2">Link 2</a>
  <a id="link3">Link 3</a>
</div>

<div>
  <div id="marker1">Marker 1</div>
  <div id="marker2">Marker 2</div>
  <div id="marker3">Marker 3</div>
</div>

Is there a way to write a function in jQuery which would ensure that when the user hovers on link 1 – the background-color of marker 1 changes to yellow, and on link 2 – the background-color of marker 2 changes to yellow and so on…

Tags:

2

Answers


  1. 0

    I’ve created a basic example, I’ve added a generic marker class to style the markers.

    Example:

    $(document).on("mouseenter", "a", function() {

  // get the id of the hovered element
  let elemId = $(this).attr("id");
  // parse the numeric value
  let elemIndex = parseNumber(elemId);

  // add active class to related marker
  $('#marker' + elemIndex).addClass('active');

});

$(document).on("mouseleave", "a", function() {

  let elemId = $(this).attr("id");
  let elemIndex = parseNumber(elemId);

  $('#marker' + elemIndex).removeClass('active');

});

function parseNumber(str) {
  return parseInt(str.replace(/[^d]/g, ''), 10);
}
    .marker {
  transition: .5s background;
}

.marker.active {
  background: yellow;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <a id="link1">Link 1</a>
  <a id="link2">Link 2</a>
  <a id="link3">Link 3</a>
</div>

<div>
  <div class="marker" id="marker1">Marker 1</div>
  <div class="marker" id="marker2">Marker 2</div>
  <div class="marker" id="marker3">Marker 3</div>
</div>
    Login or Signup to reply.
  2. 0

    If you can’t change your html, you can use the attribute starts with selector and eq to add a class to the corresponding marker:

    const $markers = $('[id^="marker"]');

$('[id^="link"]').each((index, link) => {
   const $marker = $markers.eq(index); // get corresponding marker
   
   $(link).on('mouseenter', () => {
     $marker.addClass('background');
   }).on('mouseleave', () => {
     $marker.removeClass('background');
   });
});
    .background {
  background-color: yellow;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <a id="link1">Link 1</a>
  <a id="link2">Link 2</a>
  <a id="link3">Link 3</a>
</div>

<div>
  <div id="marker1">Marker 1</div>
  <div id="marker2">Marker 2</div>
  <div id="marker3">Marker 3</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search