Question

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

我受到fiddle的启发。

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

使用两个accordion-{{ $dimensao->id }}生成了ID competencia-{{ $competencia->id }}和foreach's。

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

我几个小时都没有成功。单击按钮后如何才能正确获取此ID？

Answer 1

如果我理解正确，那么最好不要使用id，而只依赖class es。使用$(this).find(...)仅查找内所点击元素的.colapsar-competencias元素。

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

Answer 2

http://jsfiddle.net/Vq6gt/120/

 $('#accordion .panel-collapse',this).collapse('toggle');

具有id的动态构造的HTML

2 个答案: