Javascript id为'的HTML；动态构造

我有一个带有

div

的html页面，它有一个用于折叠/展开表的引导按钮。我想点击它来切换collpase/expand

这让我深受鼓舞

javascript是

    $('.meu-painel-colapsar').on('click', function () {
        var id1 = $('.meu-painel-colapsar').attr('id');
        var id2 = $('.colapsar-competencias').attr('id');
         alert(id1);
        $('#' + id2 + ' .colapsar-competencias').collapse('toggle');
    });

html是

@foreach($dados as $dimensaoNome => $dimensao)
        <div class="panel panel-{{ $cores[$dimensaoNome] }} meu-painel-colapsar" id="accordion-{{ $dimensao->id }}">

                        <button type="button" class="btn btn-success btn-xs"
                                id="dimensao_{{ $dimensao->id }}"
                                data-toggle="collapse" data-target="#">
                            <span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> veja os resultados
                        </button>

            <div class="panel panel-default">
                @foreach($dimensao->competencias as $competenciaNome => $competencia)

                    <div class="panel-heading">
                        <div class="row">
                            <div class="col-md-6"><h4 class="competencia-head">{{ $competenciaNome }}</h4></div>
                            <div class="col-md-6" style="padding-top:8px;">
                        </div>
                    </div>
                    <div class="collapse colapsar-competencias" id="competencia-{{ $competencia->id }}">
                        <table class="table table-condensed">
                            <thead>
                            <tr>
                                <th>Situação atual</th>
                                <th class="col-md-6">Oportunidades identificadas</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>
                                    <p>{{ $competencia->nivel->texto }}</p>                                        
                                </td>
                                <td>
                                    <div class="col-lg-12">
                                        {!! $competencia->recomendacao !!}
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                @endforeach
            </div>
        </div>
@endforeach

@foreach（$dados作为$dimensaoNome=>$dimensao）
veja os resultados酒店
@foreach（$dimensao->competinceas作为$competinceanome=>$competinceia）
{{$competenciaNome}}
西图阿图
识别机会
{{$competencia->nivel->texto}}

{！！$competencia->recomendacao！！}
@endforeach
@endforeach

id的

accordion-{{$dimensao->id}}

和

competencia-{{$competencia->id}

由两个

foreach的
生成

问题是javascript代码只获取
accordion-{{{$dimensao->id}}
和
competencia-{{$competencia->id}
的第一个id

我为此挣扎了好几个小时，却没有成功。单击按钮时如何正确获取此id？

如果我理解正确，您最好根本不使用
id
s，而只依赖
class
es。使用
$（this）.find（…）
仅查找单击元素内的
.colapsar competencias
元素

$('.meu-painel-colapsar').on('click', function () {
    $(this).find('.colapsar-competencias').collapse('toggle');
});

正是那个@Nerdwood。只是对javascript缺乏经验。谢谢，没问题。很高兴我们能帮助你！：）确保你标记了一个被接受的答案，以便将来帮助他人。
$('.meu-painel-colapsar').on('click', function () {
    $(this).find('.colapsar-competencias').collapse('toggle');
});