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">