jQuery切換（）動態div ID的

Question

我需要一些動態jQuery的幫助 - 如果它是什麼它將被稱爲。基本上，我有一個號碼的DIV，每個具有相同的名稱，除了越來越多的被添加在端 - 例如：

<div id="category-1"></div> 
<div id="category-2"></div> 
<div id="category-3"></div> 

....所以和等等。在主菜單上，我想創建切換每個項目的按鈕，因此會出現一個按鈕來切換類別1，類別2等等。

添加/刪除類別的能力將成爲CMS（wordpress）的一部分，因此jQuery需要以某種方式計算頁面上有多少「類別」，然後爲每個類別創建一個按鈕在主菜單中。

我知道如何在jQuery中創建一個切換按鈕，但是我沒有得到我需要的動態性（如果這甚至是一個詞！）。到目前爲止，我的第一個也是唯一的嘗試是使用內嵌在PHP標記中的內聯jQuery，以便爲每個類別DIV生成一個jQuery切換按鈕 - 它在我查看源代碼時似乎正確生成代碼，但按鈕不起作用，可能是因爲PHP是服務器端，jQuery是客戶端。 （這只是一個猜測）。

有誰知道我是如何創建我需要的jQuery代碼？

感謝 扎克

Answer 1

這是我能想出的最好辦法：

var divs = $('div[id^="category-"]'); 
var num = divs.length; 

for (i=1; i<=num; i++) { 
    $('<button class="toggles" />') 
     .text('Toggle div ' + i) 
     .appendTo('#divToAddButtonsTo'); 
} 

$('.toggles').live('click', 
        function(){ 
         var thisIs = $(this).index(); 
         $('div[id^="category-"]').eq(thisIs).toggle(); 
        }); 

JS Fiddle demo。

顯然這是在$(document).ready()裏面運行的。

參考文獻：

• attribute-starts-with ^= selector。
• toggle()。
• live()。
• appendTo()。
• index()。

Answer 2

給你div元素共同class屬性，然後你就可以在一個單一的jQuery選擇用它來發現所有的人都在一氣呵成，例如

$('.cat').each(function() {  // for each element with class "cat" 
    $('<button>')     // create a button 
    .text($(this).attr('name')) // whose text is the cat element's "name" attribute 
    .click((function(div) {  // with a click handler 
     return function() { 
      $(div).toggle();  // that toggles 'div' 
     } 
    })(this)      // which is bound to 'this' 
    .appendTo('#container');  // and the button added to a container 
}); 

工作例如在http://jsfiddle.net/ax2UR/1/

的使用注意事項的單擊處理程序是需要創建的「這個」本地範圍的副本來代表多數民衆贊成在其上迭代div中自動調用匿名函數環路爲.each()。

編輯 - 修改後按照OP的標記使用<div name="...">來傳遞每個div的切換按鈕的標籤。

Answer 3

您當然可以計算名稱中包含「類別」的項目數量。然後你爲每個人創建一個按鈕。 尋找所有元素中包含的類別ID的代碼是一樣的東西： $(div[id='category']); //starts with

你可以看一下JQuery的格局，如果你有興趣更爲複雜的模式。

Answer 4

假設你可以在服務器端的每個格創建一個相應的按鈕：

1. 創建與一個包含相應的按鈕ID的rel屬性服務器端的每個格的按鈕。即

<input type="button" rel="1">

所以rel屬性存儲相應的DIV ID。 2.循環通過與。每個按鈕並指定點擊處理：

$('.my_buttons').each(function() { 
    $(this).click(function() { 
     $('#category-' + $(this).attr('rel')).toggle(); 
    }); 
}); 

如果你因爲某些原因無法產生在服務器端的按鈕（我想不出一個合理的理由，爲什麼你無法通過），然後只需使用.each循環遍歷每個div，並創建一個連接了點擊處理程序的相應按鈕。

編輯：這裏的a JSFiddle that shows a working concept。

Answer 5

每個

$('div[id^="category-"]').each(function(index,value){ 
$(this).after('<a href="#" id="toggle-"'+index+'>toggle</a>'); 
}); 

與得到的類別ID創建按鈕連接的toogle事件

$('a[id^="toggle-"]').live('click',function(){ 
$("#"+this.id.replace("toggle-","category-")).toggle(); 
}); 

Answer 6

開始，所以我們可以建立相應的按鈕（如果你在服務器端建立按鈕，只是忽略第一步，而不是在服務器端做）

所以我們給類別div一個這樣的類

<div id="category-1" class="category-class"></div> 

然後每過的div獲得存儲在數組中的ID現在

var categories = []; 
$(".category-class").each(function(i) { 
    categories[i] = $(this).attr("id").replace("category-", ""); 
}); 

，我們擁有所有的類別ID，我們知道他們有多少人，讓我們創建的按鈕動態

$.each(categories, function(i) { 

    // append buttons with the same id number as the category divs 
    $("#someDiv").append("<a id='button_"+categories[i]+"' href='/something' class='toggle-button'>button "+i+"</a>"); 

}); 


$(".toggle-button").live("click", function (event) { 
     //prevent propagation 
     event.preventDefault(); 

     // get the matching id 
     var id = $(this).attr("id").replace("button_", ""); 

     // toggle the div with the same id as the button 
     $("#category-"+id").toggle(); 
}); 

我還沒有試過這個代碼，所以我不知道這個語法是否100％正確，但是你明白了我的意思！

我們只是在每個類別的div上現在有一個類，我們將獲取數組中的id。現在我們相應地爲類別div創建按鈕，並帶有一個匹配的id。

然後，我們爲點擊事件創建一個活動處理程序，所以當有人點擊一個按鈕時，我們將從中獲取id，它與類別div相匹配，然後我們會使用匹配的id切換div。

祝你好運！