jQuery toggle () с динамическими идентификаторами div

Question

Мне нужна помощь с динамическим jQuery - если это так, как он будет называться.По сути, у меня есть несколько DIV, каждый с тем же именем, за исключением того, что в конце добавляется все большее число, например:

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

.... и так далее, и тому подобное.В главном меню я хочу создать кнопки для переключения каждого элемента, чтобы была кнопка для переключения категории 1, категории 2 и т. Д.

Возможность добавления / удаления категорий будетбыть частью CMS (WordPress), поэтому JQuery должен каким-то образом подсчитать, сколько "category-" есть на странице, а затем создать кнопку для каждого из них в главном меню.

Я знаюкак создать кнопку переключения в jQuery, однако мне не повезло получить необходимую мне динамичность (если это даже слово!).Моя первая и единственная попытка до сих пор состояла в том, чтобы использовать встроенный jQuery, заключенный в теги PHP, чтобы кнопка переключения jQuery генерировалась для каждой категории DIV - казалось, что код генерировался правильно, когда я просматривал исходный код, но кнопки не работалиВозможно, потому что 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 .

Очевидно, что это запускается внутри $(document).ready().

Ссылки:

• атрибут запускается с ^= селектор .
• toggle().
• live().
• appendTo().
• index().

Answer 2

Начните с получения идентификаторов категорий, чтобы мы могли создавать кнопки соответствующим образом (Если вы создаете кнопки на стороне сервера, просто пропустите первый шаг и сделайте это на стороне сервера.)

Итак, мы дадим категории div класс, подобный этому

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

Затем каждый элемент div получает свой идентификатор, сохраненный в массиве

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

Теперь, когда у нас есть все идентификаторы категорий и мы знаем, сколько их, давайте создадим кнопки динамически

$.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 категории, у которого теперь есть класс, и мы извлекаем идентификаторы из массива. Теперь мы строим кнопки в соответствии с категорией div с соответствующим идентификатором.

Затем мы создаем оперативный обработчик для события click, поэтому, когда кто-то нажимает кнопку, мы извлекаем из нее идентификатор, который соответствует категории div, и переключаем div с соответствующим идентификатором.

Удачи!

Answer 3

Дайте вашим 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/

Обратите внимание на использование автоматически вызываемой анонимной функции в обработчике кликов, которая необходима для создания локальной копии "this" для представления div, который повторяется в цикле .each().

РЕДАКТИРОВАТЬ - изменено, чтобы следовать метке OP, где он использовал <div name="...">, чтобы передать метку для кнопки переключения каждого div.

Answer 4

Создать кнопку для каждого

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

прикрепить событие toogle

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

Answer 5

При условии, что вы можете создать соответствующую кнопку для каждого div на стороне сервера:

1. Создайте кнопку для каждого элемента div на стороне сервера с атрибутом rel, который содержит идентификатор для соответствующей кнопки. т.е.

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

Таким образом, атрибут rel хранит соответствующий идентификатор div. 2. Прокрутите кнопки с помощью .each и назначьте обработчик нажатия:

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

Если вы по какой-то причине не можете сгенерировать кнопки на стороне сервера (хотя я не могу придумать логическую причину, по которой вы не смогли этого сделать), просто выполните цикл по каждому div с помощью .each и создайте соответствующую кнопку с прикрепленным обработчиком щелчка.

Редактировать: Вот JSFiddle, который показывает рабочую концепцию .

Answer 6

Вы, конечно, можете посчитать количество предметов, имена которых включают «категорию».Затем вы создаете кнопку для каждого из них.код для поиска всех элементов с идентификатором, подобным категории, выглядит примерно так: $(div[id='category']); //starts with

Вы можете посмотреть шаблон JQuery, если вас интересуют более сложные шаблоны.