jQuery的循環切換ID

我想動態改變我的頁面的背景使用jquery航點插件（它告訴你什麼時候一個元素是在視口的頂部或底部）。我的HTML很簡單 - 我有多個標題，標識爲#part1',＃part2'等，等等。當part[x]位於視口的頂部時，我想要顯示img[x]。jQuery的循環切換ID

下面的代碼工作：

$("#part2").waypoint(function(event, direction) { 
    if (direction === 'down') { 
     $(".container").attr("id", "img2"); 
    } 
    else { 
     $(".container").attr("id", "img2"); 
    } 
});

但是，我有18個「部分」，我不希望這個代碼的18倍。我試圖用一個for循環這樣的：

var chapters = $("[id^='part']"); 

for (var i=1; i<=chapters.length; i++){ 

    $("#part[i]").waypoint(function(event, direction) { 
     if (direction === 'down') { 
      $(".container").attr("id", "img[i]"); 
     } 
     else { 
      $(".container").attr("id", "img[i]"); 
     } 
    }); 
}

但同樣，不能正常工作。是否有可能像我所做的那樣用方括號將選擇器轉義出來？如果不是，那麼實現這個的正確方法是什麼？

來源

2013-01-11 Jascination

我很困惑你爲什麼要執行一個if/else，對於這兩個條件都有相同的動作 – Popnoodles

@popnoodles是的，這是多餘的，但是當我還在編寫代碼時，我只是想要選項如果用戶正在向上滾動或向下滾動，則具有單獨的條件。 – Jascination

以及如何更改.container的ID最終顯示不同的圖像？ – Alnitak

假設航點插件編寫正確並處理多個元素：

$("[id^='part']").waypoint(function(event, direction) { 
    $(".container").attr('id', this.id.replace('part', 'img')); 
});

根據需要添加方向檢查。

我不熟悉這個插件，但關鍵的是，你應該能夠航點插件多個元素進行綁定，然後將事件處理程序中this應該是觸發事件的元素，其ID就是this.id。

注：只是改變對.container的ID通常不會改變它的形象，除非你已經有了一個看起來像CSS規則堆棧：

#img1 { background-image: ... } 
#img2 { background-image: ... } 
...

然而，在這種情況下，你應該使用類而不是ID--元素的ID在其整個生命週期中保持不變並更改其CSS類更爲正常。

如果.container有沒有其他的CSS類這將使意義給它的container一個固定的ID來代替，而上面的代碼的變體：

$("[id^='part']").waypoint(function(event, direction) { 
    $("#container").attr('class', this.id.replace('part', 'img')); 
});

約束上沒有任何其他的CSS類的由於class可以包含多個值，所以要完全覆蓋類列表要比刪除以前的類（不管那是什麼）更簡單，然後添加新的類。

來源

2013-01-11 23:07:03 Alnitak

我喜歡這個答案最好，削減了代碼的使用量，並具有與使用'for'循環相同的效果。你是對的，我有這些CSS的規則，我會改變他們的類。 – Jascination

我能不能簡單地說一下 - 用.attr（'class'，this.id.replace（'part'，'img'））'，你能基本上放任何東西而不是'this.id .replace（）'？即使是一個功能？ – Jascination

當然，你可以在其中放置很多其他的東西，包括一個函數，它會傳遞當前值，其返回值將成爲新值。 – Alnitak

相反，如果用方括號，爲什麼不：

$("#part" + i) 
"img" + i

然後，您只需選擇ID，並動態創建的ID。

來源

2013-01-11 23:02:28 Flash

，您可以嘗試這樣

for (var i=1; i<=chapters.length; i++){ 

    $("#part" + i).waypoint(function(event, direction) { 
     if (direction === 'down') { 
      $(".container").attr("id", "img" + i); 
     } 
     else { 
      $(".container").attr("id", "img" + i); 
     } 
    }); 
}

，而不是單獨的ID，我會用CSS類，做這樣你不需要一個循環

來源

2013-01-11 23:03:06

jQuery的循環切換ID

回答

相關問題