Показать div создают динамически, которые находятся внутри других div динамически

Question

Я создаю несколько 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'];

}

Итак, у меня следующая структура:

 data
   |_friend0
   |     |_istaggedWithbtn istaggedWithbtn0
   |     |_ istaggedWith istaggedWith0
   |
   |_friend1
         |_istaggedWithbtn _istaggedWithbtn1
         |_istaggedWith istaggedWith1

Div istaggedWith скрыты со свойством display:none;

Я хочу нажать на istaggedWithbnt1 и показать только связанный div istaggedWith; в этом случае istaggedWith1. Как я могу это сделать?

Я пишу только следующий код, чтобы включить событие нажатия на кнопку, но я не могу показать соответствующий div

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

Answer 1

Вы также пропустили {} на вашем, если

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

Answer 2

Эта строка

$('.friend'+index).append

делает конкат перед строкой

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

Также хорошим способом проверки является превращение добавляемого материала в переменную.

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);

Затем вы можете сделать предупреждение, чтобы проверить правильность показа div, используя div и затем + с другим Div может создать проблемы.

Еще одна вещь, эти два значения?

data[index]['friend']['name']

Если это так, установите их как переменные

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

, но я думаю, что это должно быть

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

Для вашего оператора IF сделайте это следующим образом

lastFriendInsert !=  friend

если это два значения, ваш IF должен быть таким

lastFriendInsert !=  friend || lastFriendInsert !=  name

Используя переменные, вы можете использовать console.log или alert, чтобы проверить правильность значения, надеюсь, это поможет вам исправить вопросы.