[英]Turning Javascript into jQuery
Hi there Stack Overflow, 嗨,堆栈溢出,
I'm new at learning jQuery and just trying to condense some sample code down, how would I go about the following. 我是学习jQuery的新手,只是尝试将一些示例代码压缩下来,我将如何处理以下内容。
On mouseover of #navweb, select all elements with a class of .web and then change the background of each of these elements to url(back/"+ i +".png) where i is the JS loop, and then fadeIn these new backgrounds. 在#navweb的鼠标悬停时,选择所有带有.web类的元素,然后将每个元素的背景更改为url(back /“ + i +”。png),其中i是JS循环,然后淡入背景。
Here's the JS i have at current which works (except for the fadeIn) 这是我目前可以使用的JS(fadeIn除外)
function showweb() {
for(var i=1; i < 45; i++){
var el = document.getElementById("im"+(i));
if(el && /web/.test( (el ||{}).className)){
el.style.backgroundImage = "url(back/"+ i +"col.png)";}
}
}
function hideweb() {
for(var i=1; i < 45; i++){
var el = document.getElementById("im"+(i));
if(el && /web/.test( (el ||{}).className)){
el.style.backgroundImage = "url(back/"+ i +".png)";}
}
}
I started and got to something like this but it doesn't work, becasue i know its not complete, can you use counters in jQuery? 我开始学习了类似的东西,但是它不起作用,因为我知道它不完整,可以在jQuery中使用计数器吗?
$('#navweb').mouseover(function(){
var i = 1;
$(".web").each(function(){
$(this).css('background-image', 'url(back/" + i + ".col.png)');
i += 1;
});
});
Many thanks to all replies. 非常感谢所有回复。
EDIT: Thanks to all replies, Guffa's proved the most ideal and condensed for my use; 编辑:感谢所有答复,事实证明Guffa's是最理想的,适合我使用。 I have also added the fadeIn() method but doesn't seem to be triggering on the mouseover?
我还添加了fadeIn()方法,但是似乎没有在鼠标悬停时触发吗?
$('#navweb').mouseover(function(){
$(".web").each(function(){
var i = parseInt(this.id.substr(2));
$(this).css('background-image', 'url(back/' + i + 'col.png)').fadeIn(1000);
});
});
You can get the number from the id of the element: 您可以从元素的ID中获取数字:
$('#navweb').mouseover(function(){
$(".web").each(function(){
var i = parseInt(this.id.substr(2));
$(this).css('background-image', 'url(back/' + i + '.col.png)');
});
});
You had a small mistake here: 'url(back/" + i + ".col.png)'
, it should be like I wrote bellow with single quotes. 您在这里有一个小错误:
'url(back/" + i + ".col.png)'
,应该就像我用单引号写了波纹管一样。
$('#navweb').mouseover(function(){
var i = 1;
$('.web').each(function(){
$(this).css('background-image', 'url(back/' + i + '.col.png)');
i += 1;
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.