的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代码优化

回答

相关问题