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中创建一个切换按钮，但是我没有运气得到我需要的动态 - 如果那就是一个字！）。到目前为止，我的第一次也是唯一的尝试是使用内嵌jQuery封装在PHP标签中，以便为每个类别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()内进行的。

参考文献：

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/

的工作示例

请注意在单击处理程序中使用自动调用的匿名函数，这是创建“this”的本地作用域副本以表示在.each()循环中迭代的div所必需的。

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

Answer 3

从获取类别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。

然后我们为click事件创建一个实时处理程序，所以当有人点击一个按钮时，我们将从中获取id，它与一个类别div匹配，我们将使用匹配的id切换div。 / p> 祝你好运！

Answer 4

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

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

Answer 5

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

为服务器端的每个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。

Answer 6

为每个

创建按钮

$('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();
});

带有动态div ID的jQuery toggle（）

6 个答案: