使用大量选择器简化此 jQuery 代码

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 */
}

您应该向它们添加类，而不是通过数据类型来识别

，这样您就可以执行以下操作：

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

---

更新：要求是突出显示不仅是鼠标悬停在哪个

上，还有具有相同数据类型 的所有其他

。执行此操作的 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 类。这样，您就不必弄乱 JavaScript 中的所有 CSS 属性，只需对所有项目执行 .removeClass("highlight") ，然后 .addClass("highlight") > 对于其他人。