Упростите этот jQuery-код с большим количеством селекторов

Question

как я могу упростить этот код? Mouse-Events все очень похожи. Поэтому должен быть способ сократить код.

СПАСИБО, 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

Вы применяете только стили - поэтому вы должны использовать CSS, а не Javascript.

Создайте файл CSS и добавьте следующее:

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

И вместо того, чтобы идентифицировать <li> s по их типу данных, вы должны добавить к ним классы, так что вы можете сделать:

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

---

Обновление: требуется выделять не только то, что <li>, над которым находится мышь, но и все остальные <li> с тем же data-type. Javascript для этого:

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
});

Надеюсь, что наконец-то поможет!

Sidenote: хотя вышеприведенное сработает, я бы рекомендовал установить класс CSS для выделенного состояния. Таким образом, вместо того, чтобы связываться со всеми атрибутами CSS в вашем javascript, вы можете просто сделать .removeClass("highlight") для всех элементов и .addClass("highlight") для остальных.