Question

你好Stack Overflow，

我是学习jQuery的新手，只是尝试压缩一些示例代码，我将如何进行以下操作。

在鼠标悬停#navweb时，选择所有带有.web类的元素，然后将每个元素的背景更改为url（back /“+ i +”。png），其中i是JS循环，然后淡出这些新背景。

这是我目前工作的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)";}
    }
}

我开始并得到类似的东西，但它不起作用，因为我知道它不完整，你能在jQuery中使用计数器吗？

$('#navweb').mouseover(function(){

var i = 1;
$(".web").each(function(){
$(this).css('background-image', 'url(back/" + i + ".col.png)'); 
i += 1;
});

});

非常感谢所有回复。

编辑：感谢所有回复，Guffa被证明是最理想和最浓缩的用途;我还添加了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); 
  });

});

Answer 1

您可以从元素的ID中获取数字：

$('#navweb').mouseover(function(){

  $(".web").each(function(){
    var i = parseInt(this.id.substr(2));
    $(this).css('background-image', 'url(back/' + i + '.col.png)'); 
  });

});

Answer 2

你在这里犯了一个小错误：'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;
    });
});

将Javascript转换为jQuery

2 个答案: