Question

使用引导程序，我正在使用折叠功能来折叠我的表like this。我通过以下方法加入了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。

我无法静态映射值，因为我只是基于数据库返回值生成行。树枝是

        {% 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

Answer 1

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

应该很容易，在Javascript中，您可以在函数外部设置变量并声明它，以便它是全局的。即

<script>let variable;</script>

或

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

或

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

然后，无论是硬代码对其进行更改还是通过表单条目或选择项对其进行更改，因为它是全局的，都可以在您的函数中作为变量对其进行访问。

您可以尝试这样的事情：

{% 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（）中放置的任何内容（在我的情况下为img标签）替换“正在加载...”。

Answer 3

如果要定位多个折叠，则应使用类选择器而不是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对象

3 个答案:

HTML

JavaScript