的JavaScript/jQuery代碼優化

我學習JavaScript和jQuery和我目前正在處理下面的代碼：的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小提琴：link

來源

2017-09-12 Lukasz

換上類所有這些ID？ – PredatorIWD

我們需要看到你的HTML看到'＃hrefX'元素如何與'＃imgX'元素，我敢肯定，這可以簡化這種使用DOM遍歷和在一個循環中沒有醜陋的級聯選擇 –

閉包是問題 –

您可以將類設置爲元素，並選擇類，例如假設你想用「blurMeContainer」的容器，你可以做這樣的事情：

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

訣竅是，你必須知道的jQuery應用事件的元素，所以事件的功能裏面，「這個」訪問是參與事件的元素，比你可以使用$函數選擇器爲了讓他有相應的jQuery元素，然後你可以使用「find」方法找到任何img標籤in insid e jQuery元素。顯然，只有當容器中有單個圖像時，如果您需要識別單個容器中的一組圖像中的一個圖像，爲該圖像分配一個類（IE：「blurMe」）並更改代碼以這樣的方式

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

來源

2017-09-12 10:00:30 Sycraw

使用attributeStartsWith選擇，其選擇有一個值開始正好與給定的字符串指定屬性的元素：

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

這裏的工作fiddle

來源

2017-09-12 10:36:49

雖然在做什麼你的af ter可以用JQuery完成。我個人認爲這是Job的錯誤工具。

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

來源

2017-09-13 10:34:56 Keith

的JavaScript/jQuery代碼優化

回答

相關問題