の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"); 
    }); 
    } 

しかし、このコードは機能しません。あなたは、あなたがこのような何かを行うことができ、コンテナのための「blurMeContainer」を使用したいとしましょう例えば、linkは

Answer 1

あなたは要素にクラスを設定し、そのクラスを選択することができます：

ここでJSのフィドルだ

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

jQueryはイベントを要素に適用するので、イベント関数の内部では、「this」アクセサがイベントに関与する要素であることに注意する必要があります。セレクタは彼の寛容なjQuery要素を持つために、そしてあなたはimgタグを見つけるために "find"メソッドを使うことができます。insid e jQuery要素。明らかにこれはコンテナ内に単一のイメージがある場合にのみ機能します。単一のコンテナ内のイメージセット内のイメージを1つだけ識別し、そのイメージにクラスを割り当て（IE： "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"); 
}); 

はここで何をやってますがfiddle

Answer 3

を働いていますあなたのaf 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">