Question

我正在从JSON文件中读取内容并添加到具有唯一ID的div。我需要调用jquery向下滑动效果到每个div。让我们考虑一下这个案例，点击（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++;
});

这是我可以推导出的最接近的代码，但它不起作用。如果有人能帮助我修复或建议一个更好的方法来使这个东西工作，那将是伟大的。非常感谢！

Answer 1

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

一点解释

div[id^=A]指出div以id开头的A。
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++;
});

<强> Working Sample

注意

当您从div和A(1..N)动态创建B(1..N)时，您需要委托事件处理程序（也称为直播事件）。

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

$(container).on(eventName, target, handlerFunction)

动态地将id分配给div并使用它来调用jquery幻灯片效果

1 个答案:

一点解释

注意