Jquery 显示动态创建的div，这些div位于其他div动态创建的div中

我用这个片段创建了一些div

for (let index = 0; index < data.length; index ++)
{
    if (lastFriendInsert !=  data[index]['friend']['name'])
    {
        $('.data').append(
            '<div class="friend friend'+index+'">' +
                '<span class=\'dataKey\'>Name: </span><span class=\'dataValue\'>' + data[index]['friend']['name'] + '</span><br>'
            '</div>'
        );

        if ( data[index]['whoIsTagged'] != null && data[index]['taggedTogetherCount'] != null)
            $('.friend'+index).append(
                '<div class=" btn istaggedWithbtn istaggedWithbtn'+index+'">Show who is tagged with</div>' +
                '<div class="istaggedWith istaggedWith'+index+'"></div>'
            );

        lastIndexInsert = index;
        taggedWith(data,lastIndexInsert,index);
    }

    lastFriendInsert = data[index]['friend']['name'];

}

DIV

IStagedWith

与属性

display:none一起隐藏

我想点击
istaggedWithbnt1
，只显示相关的div
istaggedWith
；在这种情况下，
IStagedWith1
。我该怎么做

我只编写以下代码来启用按钮上的click事件，但无法显示相关的div

     $('.data').on('click', '.istaggedWithbtn',function(){
                ...
     });

这条线

$('.friend'+index).append

在生产线前进行连铸

var class= '.friend' + index;
$(class).append

测试的另一个好方法是将append内容添加到var中

var content = '<div class=" btn istaggedWithbtn istaggedWithbtn'+index+'">Show who is tagged with</div><div class="istaggedWith istaggedWith'+index+'"></div>'

if ( data[index]['whoIsTagged'] != null && data[index]['taggedTogetherCount'] != null)
$(class).append(content);

如果是，则将其设置为VAR

var friend = data[index]['friend'];
var name = data[index]['name'];

但我认为应该是这样

var friend = data[index].friend;
var name = data[index].name;

对于您的IF语句，请这样做

lastFriendInsert !=  friend

lastFriendInsert !=  friend || lastFriendInsert !=  name

如果它是两个值，那么你的if需要像这样

lastFriendInsert !=  friend

lastFriendInsert !=  friend || lastFriendInsert !=  name

通过使用变量，您可以使用console.log或alert检查值是否正确，希望这能帮助您解决问题。
您还错过了if上的{}

if ( data[index]['whoIsTagged'] != null && data[index]['taggedTogetherCount'] != null)
            $('.friend'+index).append(
                '<div class=" btn istaggedWithbtn istaggedWithbtn'+index+'">Show who is tagged with</div>' +
                '<div class="istaggedWith istaggedWith'+index+'"></div>'
            );

if（数据[索引]['whoIsTagged']！=null和数据[索引]['taggedTogetherCount']！=null）
$（'.friend'+索引）。追加(
“显示谁被标记为”+
''
);

应该是

var friend = data[index].friend;
var name = data[index].name;

 if ( data[index]['whoIsTagged'] != null && data[index]['taggedTogetherCount'] != null)
{
            $('.friend'+index).append(
                '<div class=" btn istaggedWithbtn istaggedWithbtn'+index+'">Show who is tagged with</div>' +
                '<div class="istaggedWith istaggedWith'+index+'"></div>'
            );
}

if（数据[索引]['whoIsTagged']！=null和数据[索引]['taggedTogetherCount']！=null）
{
$（'.friend'+索引）。追加(
“显示谁被标记为”+
''
);
}
括号{}实际上是多余的，因为
if
只包含一条指令；在这个例子中，append（）是真的，我本可以完成你说的任务，但它们不会解决我的问题。他们只会避免太长的指令。我已经测试了整件事，从中得出的结构是我想要的。在这个问题上的变化非常普遍。很难找到它们，因为每个人的用例都不一样，具体情况也千差万别。-从单击的元素开始，并使用该元素标识所需的元素。在您的情况下，在事件处理程序中，类似于：
$（this）.closest（'[class^=friend]'）。find（'.istaggedWith'）。show（）
应该可以完成。这是否回答了您的问题？