Bootstrap 崩溃 - 传递值或获取 DOM 对象

Question

使用 bootstrap 我正在使用折叠功能折叠我的 table 类型的 like this. I am hooking into the collapse js 具有以下内容：

<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.

我无法静态映射值，因为我只是根据数据库生成行 return。树枝是

        {% 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 才能传递给 bootstrap jQuery

Answer 1

这不是一个明确的问题，因为答案取决于...

应该很容易，在 Javascript 中，您在函数外部设置了一个变量并声明它，因此它是全局的。 IE。

<script>let variable;</script>

或

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

或

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

那么无论是硬代码更改还是通过表单条目或 select 项目更改它，因为它是全局的，它将在您的函数中作为变量访问。

您可以尝试这样的操作：

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

Answer 2

以防万一有人想查看结束代码（基于 David Liang 的回答）以了解如何执行此操作...

树枝：

    {% 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() 中的任何内容替换 "Loading..."（在我的例子中是 img 标签）。

Answer 3

如果您要定位多个合拢，您应该使用 class 选择器而不是 ID 选择器：

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

您可以从 e.target.id.

中获取折叠的 DOM 元素 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之外还有更多数据需要抓取，可以在构造HTML时使用data-绑定数据，然后 jQuery 在目标对象上并从那里开始：

HTML

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

不知道有没有回答你的问题，你的问题我也不清楚

Bootstrap 崩溃 - 传递值或获取 DOM 对象

Bootstrap collapse - pass value or get DOM object

javascript

jquery

collapse

bootstrap-4

HTML

JavaScript