带有动态 div ID 的 jQuery toggle()

Question

我需要一些关于一些动态 jQuery 的帮助——如果这就是它的名称。基本上，我有许多 DIV，每个都具有相同的名称，除了最后添加的数字越来越多 - 例如：

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

....如此等等。在主菜单上，我想创建切换每个项目的按钮，所以会有一个按钮来切换 category-1、category-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

从获取类别 ID 开始，因此我们可以相应地构建按钮（如果您在服务器端构建按钮，请忽略第一步，而是在服务器端进行。）

所以我们会给类别 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。

然后我们为点击事件创建一个实时处理程序，因此当有人点击一个按钮时，我们会从中获取与类别 div 匹配的 id，然后我们将使用匹配的 id 切换 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' 的本地范围副本以表示在 .each() 循环中迭代的 div 所必需的。

编辑 - 修改为遵循 OP 的标记，他使用 <div name="..."> 传递每个 div 的切换按钮的标签。

Answer 4

您当然可以计算名称中包含“类别”的项目数量。然后为它们中的每一个创建一个按钮。 查找具有 id 类的所有元素的代码类似于： $(div[id='category']); //starts with

如果您对更复杂的模式感兴趣，可以查找 JQuery 的模式。

Answer 5

为每个按钮创建按钮

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

附加工具事件

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

Answer 6

假设你可以为服务器端的每个div创建一个对应的按钮：

1. 为服务器端的每个 div 创建一个按钮，其 rel 属性包含相应按钮的 id。即

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

所以rel属性存储了对应的div id。 2. 使用 .each 遍历按钮并分配点击处理程序：

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

如果您由于某种原因无法在服务器端生成按钮（我想不出为什么不能这样做的合乎逻辑的原因），那么只需使用 .each 遍历每个 div 并创建一个相应的按钮附加了一个点击处理程序。

编辑：这里是a JSFiddle that shows a working concept。