0

我正在从 JSON 文件中读取内容并添加到具有唯一 ID 的 div 中。我需要为每个 div 调用 jquery 向下滑动效果。让我们考虑这种情况，单击 (div id=A1) 它应该向下滑动并显示 (div id=B1)，这样我就有了 ID 为 A(1..N) 和 B(1..N) 的 div .

var i=1;
$.each(items, function (index, item) {

    $(document).ready(function(){
        $("#A"+i).click(function(){
        $("#B"+i).slideToggle();
        });
    });

    $("#allContents").append('<div id="A'+i+'">' + item.Name + '</div>');
    $("#allContents").append('<div id="B'+i+'">' + item.Details + '</div>');
    i++;
});

这是我可以得出的最接近的代码，但它不起作用。如果有人可以帮助我修复或提出更好的方法来让这件事正常工作，那就太好了。非常感谢！

4

1 回答 1

1 
$('#allContents').on('click', 'div[id^=A]', function() {
    $('div#B' + this.id.replace('A','')).slideToggle();
});

稍微解释一下

  • div[id^=A]指出以 .开头的div那些。idA
  • this.id检索被id点击的元素。
  • this.id.replace('A','')替换A形式id并获得等于索引的数字索引B。
  • $('div#B' + this.id.replace('A',''))指向元素id=B1，id=B2依此类推。

完整代码

// you can bind event handler outside ot loop
$('#allContents').on('click', 'div[id^=A]', function() {
    $('div#B' + this.id.replace('A','')).slideToggle();
});

$.each(items, function(index, item) {
    $("#allContents").append('<div id="A' + i + '">' + item.name + '</div>');
    $("#allContents").append('<div id="B' + i + '">' + item.Details + '</div>');
    i++;
});

工作样本

笔记

当您div从动态创建时A(1..N)，B(1..N)您需要委托事件处理程序（又名实时事件）。

委托事件的 jQuery 语法.on()如下：

$(container).on(eventName, target, handlerFunction)
于 2012-06-22T06:54:24.637 回答