將Javascript轉換成jQuery

Question

嗨，堆棧溢出，

我是學習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's是最理想的，適合我使用。 我還添加了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;
    });
});