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小提琴： 链接

Answer 1

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

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

诀窍在于，您必须知道jQuery将事件应用于元素，因此在events函数中，“ this”访问器是事件所涉及的元素，然后可以在选择器中使用$函数，以便具有他相应的jQuery元素，然后您可以使用“查找”方法在jQuery元素内找到任何img标签。 显然，这仅在容器中有单个图像的情况下才有效，如果您只需要在单个容器中识别一组图像中的一个图像，则为该图像分配一个类（即：“ blurMe”）并更改代码通过这种方式：

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

Answer 2

使用attributeStartsWith选择器，该选择器选择具有指定属性且其值以给定字符串开头的元素：

$('a[id^="hrefBlur"]').hover(function() {
    $(this).find('img').toggleClass("blur frame");
});

这是工作的小提琴

Answer 3

虽然可以使用JQuery完成您的任务。 我个人认为这是工作的错误工具。

CSS将以一种简单得多的方式为您完成所有这些工作。 不需要Javascript。 借助浏览器优化的附加优势。

 .blurme { filter: blur(3px); cursor: pointer; transition: color 2s, filter 1s; } .blurme:hover { filter: none; color: red; font-weight: bold; } 

 <span class="blurme">One</span> <span class="blurme">Two</span> <span class="blurme">Three</span> <span class="blurme">Four</span> <span class="blurme">Five</span> <span class="blurme">Six</span> <br> <img class="blurme" src="http://placekitten.com.s3.amazonaws.com/homepage-samples/96/139.jpg"> <img class="blurme" src="http://placekitten.com.s3.amazonaws.com/homepage-samples/96/139.jpg"> <img class="blurme" src="http://placekitten.com.s3.amazonaws.com/homepage-samples/96/139.jpg">