Question

以下是hnel part.Products列表显示在pannel中：

{% for product in pro %}
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        {{ product.item_name }}<br>
                        {{ product.item_price }}
                        <div>{{ product.item_time_end }}</div>
                    </div>
                    <div class="panel-body">
                        <img src="{{ product.item_image.url }}" class="img-rounded" alt="Cinque Terre" width="304" height="236">
                    </div>
                    <div class="panel-footer">
                        <button type="button" class="btn btn-success" id="myBtn">
                            SUBMIT
                            <div class="collapse">
                            ...
                            </div>
                        </button>

jQuery的：

$(document).ready(function(){
    $("#myBtn").click(function(){
        $(".collapse").collapse('show');
    });
});

事情是在模板渲染时，所有项目列表pannels立即崩溃。单击特定项目时如何折叠单个项目？事情是循环的按钮ID是相同的。

Answer 1

使用$(this).next()查找下一个兄弟，即.collapse：

$(".myBtn").click(function(){
    $(this).next().collapse('show'); // this will work only if .collapse is the next sibling
});

或使用.siblings()：

$(".myBtn").click(function(){
    $(this).siblings('.collapse').collapse('show'); // this will work only if .collapse is one of the siblings
});

或者使用.parent()上升一级，然后搜索.collapse，如果它不是下一个兄弟：

$(".myBtn").click(function(){
    $(this).parent().find('.collapse').collapse('show');
});

另外请注意我使用.myBtn，因为#myBtn应该是唯一的：

<button type="button" class="btn btn-success myBtn">

使用jQuery动态崩溃

1 个答案: