代码之家 › 专栏 › 技术社区 › Element Zero

引导折叠-传递值或获取DOM对象

collapse bootstrap-4 jquery javascript

Element Zero · 技术社区 · 7 年前

<script type="text/javascript">
$('#demo1').on('shown.bs.collapse', function () {
    that = $(this);
    $.ajax({
        url:'{{ (path('orders')) }}',
                type: "POST",
                dataType: "json",
                data: {
                    "id": "1"
                },
                async: true,
                success: function (data)
                {
                    console.log(data)
                    $('div#demo1').html('<img src="data:image/png;base64,' + data.output + '" />');
                }
            });
            return false;

        });
    </script>

如何将值传递给该函数或获取传递该值的dom元素的名称(即#demo1)?我基本上需要传递一个值作为id值传递给ajax POST。

        {% for x in search%}
            <tr data-toggle="collapse" data-target="#demo{{ loop.index }}" class="accordion-toggle">
                <th>{{ x.id}}</th>
            <tr>
                <td colspan="5" class="hiddenRow">
                    <div class="accordian-body collapse" id="demo{{ loop.index }}">
                        Demo{{ loop.index }} data
                    </div>
                </td>
            </tr>
        {% endfor %}

基本上在上面我需要访问 x.id 传递到引导jQuery

3 回复 | 直到 7 年前

David Liang 7 年前

如果目标是多个折叠,则应使用类选择器而不是id选择器:

$(function(){
    $('.accordian-body.collapse').on('show.bs.collapse', function(e) {
        ...
    });
});

您可以从 e.target.id

// If using your example:
//   if you click on 1st row you will get:
demo1
//   if you click on 2nd row you will get:
demo2
//   if you click on 3rd row you will get:
demo3

如果需要获取的数据多于id,则可以使用绑定数据 data- 在构建HTML时,然后在目标对象上执行jQuery并从那里开始:

<div class="accordian-body collapse" id="demo{{ loop.index }}" 
    data-index="{{ loop.index }}">
    Demo{{ loop.index }} data
</div>

JavaScript语言

$('.accordian-body.collapse').on('show.bs.collapse', function(e) {
    let $collapsedTarget = $(e.target),
        index = $collapsedTarget.data('index');
});

David White 7 年前

<script>let variable;</script>

<script>let variable = 0;</script>

或

<script>let variable = 'word';</script>

你可以这样做:

{% for x in search <script>let variable=x;</script> %}

Element Zero 7 年前

以防有人想看到如何做到这一点的最终代码(基于梁大卫的答案)。。。

细枝:

    {% for x in search%}
        <tr data-toggle="collapse" data-target="#demo{{ loop.index }}" class="accordion-toggle">
            <th>{{ x.id}}</th>
        <tr>
            <td colspan="5" class="hiddenRow">
               <div class="accordian-body collapse" id="demo{{ loop.index }}" data-index="{{ x.id }}">
                    Loading...
               </div>
            </td>
        </tr>
    {% endfor %}

脚本:

<script type="text/javascript">
$('.accordian-body.collapse').on('shown.bs.collapse', function (e) {
    let $collapsedTarget = $(e.target),
        record_id = $collapsedTarget.attr('data-index');
    $.ajax({
        url:'{{ (path('orders')) }}',
                type: "POST",
                dataType: "json",
                data: {
                    "id": record_id.toString()
                },
                async: true,
                success: function (data)
                {
                    console.log('Record ID: ' + record_id);
                    console.log(data)
                    $(e.target).html('<img src="data:image/png;base64,' + data.output + '" />');
                }
            });
            return false;    
        });
</script>

它将用您在.html()中放入的任何内容(在我的例子中是img标记)替换“加载…”。