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>，你应该为它们添加类，所以你可以这样做：

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属性。

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

1 个答案: