CODEWITHSUNDEEP
jquerycss
Wannabe
Wannabe

Reputation: 596

jQuery hover highlight hovered link and corresponding link

I have a page that will have at least 60 different links, and at least 10 of them will have a corresponding link that when either one is hovered over, the corresponding one needs to be highlighted. I figured out a way (one-sided so far), but want to make sure if this is the best way, or can it be done more efficiently. I don't know if this would be the case , but I don't want to have a 100+ link page (with 30+ corresponding links) that takes a long time to highlight both links. Each link will have at least 5 class selectors.

Please see the Fiddle that demonstrates it...one sided (hovering over person), but if I hover over the sport, the person needs to highlight also.

Also, I will not know the class to use until runtime. I only know that it will start with "startEnd".

$('.block1').hover(
  function() {
    var classes = $(this).attr('class').split(' ');

    for (var x = 0; x < classes.length; x++) {
      if (classes[x].substr(0, 8) === "startEnd") {
        selectedClass = classes[x];
        break;
      }
    }

    $("." + selectedClass).addClass("border");
  },
  function() {
    $("." + selectedClass).removeClass("border");
  }
);
<div class="container">
  <div>
    <div class="startEnd1 block1 green">Don Mattingly</div>
    <div class="startEnd2 block1 green">Michael Jordan</div>
    <div class="startEnd3 block1 green">Peyton Manning</div>
  </div>
  <hr style="clear: left" />
  <h2>Sport</h2>
  <div class="square1 gray startEnd1 p1 p2 p3">Baseball</div>
  <div class="square1 gray startEnd2 p1 p2 p3">Basketball</div>
  <div class="square1 gray startEnd3 p1 p2 p3">Football</div>
</div>

Upvotes: 1

Views: 83

Answers (2)

lucasnadalutti
lucasnadalutti

Reputation: 5958

The cleanest way I see here is to make some data attribute of the element equal to the class that's common to both links. No loops, no hacks, and you can use jQuery's .data() method to make your code even cleaner. Example:

<div class="container">
    <div>
        <div class="startEnd1 block1 green" data-commonclass="startEnd1">Don Mattingly</div>
        <div class="startEnd2 block1 green" data-commonclass="startEnd2">Michael Jordan</div>
        <div class="startEnd3 block1 green" data-commonclass="startEnd3">Peyton Manning</div>
    </div>
    <hr style="clear: left" />
    <h2>Sport</h2>
    <div class="square1 gray startEnd1 p1 p2 p3">Baseball</div>
    <div class="square1 gray startEnd2 p1 p2 p3">Basketball</div>
    <div class="square1 gray startEnd3 p1 p2 p3">Football</div>
</div>

$('.block1').hover(
    function () {
        $("." + $(this).data('commonclass')).addClass("border");
    },
    function () {
        $("." + $(this).data('commonclass')).removeClass("border");
    }
);

You can see it working here.

Upvotes: 1

Eric Martinez
Eric Martinez

Reputation: 31787

I figured out another way, I can't tell you if it's faster or not.

var firstClass;
// Apply this to all divs with class which contains "startEnd" followed
// by classes 'block1' and 'green'
$('[class*="startEnd"].block1.green').hover(
function () {

    // We take the first one since this is the one which matches the
    // links classes
    firstClass = $(this).attr('class').split(/\s+/)[0];

    // Apply
    $("." + firstClass).addClass("border");
},
function () {

    $("." + firstClass).removeClass("border");
}
);

You might want to try getting the first class just using substrings instead of regex (that might make it faster, you should try to make some kind of benchmark).

Hope it helps

Upvotes: 0

Related Questions