用很多选择器简化这个jQuery-Code

Question

我该如何简化这段代码？鼠标事件都非常相似.因此应该有一种缩短代码的方法.

谢谢,约翰内斯

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

希望终于有所帮助!

旁注:虽然上述方法有效,但我建议为突出显示的状态设置CSS类.这样,您可以简单地.removeClass("highlight")为所有项目和.addClass("highlight")其他项目执行操作,而不是弄乱javascript中的所有CSS属性.