Question

JS Fiddle (code)

This is more of a task I have set myself to learn Arrays but now I was wondering if any of you can think of a better cleaner way of doing this task. I simply want a list of projects which highlight when the user hovers over some links..

What I want to do

I have a list of projects, on each project I could have worked on the SEO, Develpment or Design. On the page there is also a list of links say: Design, Development and SEO. When hovering over a link I want some of the projects to highlight..(combinations). So some projects I might of done more then one task on will highlight for more then one link…..

How I currently tried to do this

I thought that I could make a 2d array with a list of on offs for the projects. Depending on what link you hovered over pulls out the correct array, if you see the JSfiddle link, that is as far as I could go.

An Example of something very similar

ID Design

Thank You for anyhelp or advice

I hope I explained that clearly, I know I could rip the code off for the example link, but I rather learn from doing then just cut and paste.. – see what others think and use jquery.

Answer 1

You can use 3 different styles for each project , let say : “.design”, “.seo”, “.development”

$("#link1").hover(
  function ()
  {
    $(".design").each(function()
    {
        $(this).toggleClass("highlight");
    });
  },
  function ()
  {
    $(".design").each(function()
    {
        $(this).toggleClass("highlight");
    });
  }
);

Explanation:
When mouse is hovered over link1 a class .highlight is toggled (added when mouseover,removed when mouseout) on elements that use .design class. You can do similar way to others 2 classes.