Question

how can i simplify this code? The Mouse-Events are all quite similar. Therefore there should be a way to shorten the code.

THANKS,
Johannes

 var $allItems   = $('ul.image-grid li'),
    $kindertanzItems  = $('li[data-type=kindertanz]'),
    $urbanItems   = $('li[data-type=urban]'),
    $ethnoItems   = $('li[data-type=ethno]'),
    $gesundheitItems  = $('li[data-type=gesundheit]');


   $kindertanzItems.hover(function(){
    $allItems.each(function(){
     $(this).css("opacity","0.1"); 
    });
    $kindertanzItems.each(function(){
     $(this).css("opacity","1").css("background-color","#232628").css("border-color", "black"); 
    });
   }).mouseleave(function(){
    $allItems.each(function(){
     $(this).css("opacity","1"); 
    });
    $kindertanzItems.each(function(){
     $(this).css("background-color","#33373b").css("border-color", "#222527"); 
    });
   });


   $urbanItems.hover(function(){
    $allItems.each(function(){
     $(this).css("opacity","0.1"); 
    });
    $urbanItems.each(function(){
     $(this).css("opacity","1").css("background-color","#232628").css("border-color", "#101011"); 
    });
   }).mouseleave(function(){
    $allItems.each(function(){
     $(this).css("opacity","1"); 
    });
    $urbanItems.each(function(){
     $(this).css("background-color","#33373b").css("border-color", "#222527"); 
    });
   });


   $ethnoItems.hover(function(){
    $allItems.each(function(){
     $(this).css("opacity","0.1"); 
    });
    $ethnoItems.each(function(){
     $(this).css("opacity","1").css("background-color","#232628").css("border-color", "black"); 
    });
   }).mouseleave(function(){
    $allItems.each(function(){
     $(this).css("opacity","1"); 
    });
    $ethnoItems.each(function(){
     $(this).css("background-color","#33373b").css("border-color", "#222527"); 
    });
   });


   $gesundheitItems.hover(function(){
    $allItems.each(function(){
     $(this).css("opacity","0.1"); 
    });
    $gesundheitItems.each(function(){
     $(this).css("opacity","1").css("background-color","#232628").css("border-color", "#101011"); 
    });
   }).mouseleave(function(){
    $allItems.each(function(){
     $(this).css("opacity","1"); 
    });
    $gesundheitItems.each(function(){
     $(this).css("background-color","#33373b").css("border-color", "#222527"); 
    });
   });

Answer 1

You’re only applying styles – therefore you should be using CSS not Javascript.

Create a CSS file and add the following:

ul.image-grid:hover {
   /* Opacity and color rules for whole ul in here */
}

And instead of identifying <li>s by their data-type, you should add classes to them, so you can do:

ul.image-grid > li.kindertanz:hover {
   /* Opacity and color rules for this li in here */
}

---

Update: The requirement is to highlight not only whichever <li> the mouse is hovering over, but also every other <li> with the same data-type. The Javascript to do this is:

var $allItems = $("ul.image-grid li");

// Notice that hover() can take two functions,
// one for mouseenter, one for mouseleave
$allItems.hover(function () {
   // Mouseenter
   $allItems.css("opacity", "0.1"); // No need for each(),
                                    // jquery will apply to all elements

   // Depending on your jquery version...
   // If you're using jQuery 1.4.3+ you can do this:
   var type = $(this).data("type");
   // If you're using jQuery 1.4.2 and below, you have to do this:
   var type = $(this).attr("data-type");

   // Get all items of the same type
   $("li[data-type=" + type + "]").css({
       // You can set multiple CSS rules in one go like this
       "opacity": "1",
       "background-color": "#232628",
       "border-color": "black"
   });
}, function () {
   // Do something similar on mouseleave
});

Hope that finally helps!

Sidenote: while the above will work, I’d recommend setting a CSS class for the highlighted state. That way instead of messing with all the CSS attributes in your javascript, you can simply do .removeClass("highlight") for all items, and .addClass("highlight") for the others.