JavaScript/jQuery 代码优化

Question

我正在学习 JavaScript 和 jQuery，目前我正在处理以下代码:

  $("#hrefBlur0").hover(function() {
    $("#imgBlur0").toggleClass("blur frame");
  });
  $("#hrefBlur1").hover(function() {
    $("#imgBlur1").toggleClass("blur frame");
  });
  $("#hrefBlur2").hover(function() {
    $("#imgBlur2").toggleClass("blur frame");
  });
  $("#hrefBlur3").hover(function() {
    $("#imgBlur3").toggleClass("blur frame");
  });
  $("#hrefBlur4").hover(function() {
    $("#imgBlur4").toggleClass("blur frame");
  });
  $("#hrefBlur5").hover(function() {
    $("#imgBlur5").toggleClass("blur frame");
  });
  $("#hrefBlur6").hover(function() {
    $("#imgBlur6").toggleClass("blur frame");
  });
  $("#hrefBlur7").hover(function() {
    $("#imgBlur7").toggleClass("blur frame");
  });

当我将光标悬停在网站上的 href 链接上时，代码应该消除图像的模糊效果。我想知道是否可以用更少的代码行更快地完成它。我尝试过:

  for (var i = 0; i < 8; i++) {
    $("#hrefBlur" + i).hover(function() {
      $("#imgBlur" + i).toggleClass("blur frame");
    });
  }

但是该代码不起作用。

这是 JS fiddle :link

Answer 1

您可以为元素设置一个类并选择该类，例如，假设您想使用“blurMeContainer”作为容器，您可以执行以下操作:

$(".blurMeContainer").hover(function(el){
$(this).find("img").toggleClass("blur frame");
});

技巧是你必须知道 jQuery 将事件应用于元素，因此在 events 函数中，“this”访问器是事件涉及的元素，而不是你可以在选择器中使用 $ 函数为了拥有他对应的jQuery元素，然后你可以使用“find”方法来查找jQuery元素内的任何img标签。显然，只有当容器中有单个图像时，这才有效，如果您需要识别单个容器内一组图像中的一个图像，请为该图像分配一个类(IE:“blurMe”)并更改代码这样:

    $(".blurMeContainer").hover(function(el){
$(this).find(".blurMe").toggleClass("blur frame");
});