Question

我正在编写一个Django应用程序，我在前面使用Pure CSS。 App有简单的文本框用于搜索和提交按钮。当用户键入任何查询并单击“提交”按钮时，将显示匹配条目表。对于表中的每个条目，都有一个标志按钮。当用户单击标志按钮时，会生成一个模式，要求用户将结果标记为true或false。现在，为了获得模态，我使用bootstrap模态。请在下面找到添加按钮的代码。

<div id="content2" style="min-height:400px">
        <div class="pure-u-24-19">
        <table class="pure-table pure-table-bordered" id="myTable">
            <table class="pure-table">
                <thead>
                    <tr>
                        <th>id</th>
                        <th>index</th>
                        <th>product_id</th>
                        <th>long_desc_html</th>
                        <th>seller_thumb_url</th>
                        <th>resource_types</th>
                        <th>content_type</th>
                        <th>long_desc</th>
                        <th>title</th>
                        <th>greads_review_url</th>
                        <th>url</th>
                        <th>edm_score</th>
                        <th>avg_rating</th>
                        <th>creation_date</th>
                    </tr>
                </thead>

                <tbody>
                {% if data.count > 0 %}
                {% for dist in data %}
                    <tr class="pure-table-odd">
                        <td>"{{ dist.object.id }}"</td>
                        <td>"{{ dist.object.index }}"</td>
                        <td>"{{ dist.object.product_id }}"</td>
                        <td>"{{ dist.object.long_desc_html }}"</td>
                        <td>"{{ dist.object.seller_thumb_url }}"</td>
                        <td>"{{ dist.object.resource_types }}"</td>
                        <td>"{{ dist.object.content_type }}"</td>
                        <td>"{{ dist.object.long_desc }}"</td>
                        <td>"{{ dist.object.title }}"</td>
                        <td>"{{ dist.object.greads_review_url }}"</td>
                        <td>"{{ dist.object.url }}"</td>
                        <td>"{{ dist.object.edm_score }}"</td>
                        <td>"{{ dist.object.avg_rating }}"</td>
                        <td>"{{ dist.object.creation_date }}"</td>
                        <td> <button id="{{ dist.object.id }}" type="button" class="pure-button-primary pure-button" data-toggle="modal" data-target="#myModal"> Flag </button> </td>
                    </tr>
                {% endfor %}


                {% else %}

                <li>None to show!</li>

                {% endif %} 
                </tbody>
            </table>   
        </div>
        </table>
        </div>
    </div>

我正在创建一个带有“id”= object.id的按钮（基本上它将asssign id = {1,2,3 ... n}）。现在，我想触发一个javascript，它将为相应的按钮点击生成模态。有什么方法可以编写一个通用的java脚本函数（可以使用Regex调用的函数），这样我就可以识别哪个按钮触发了Modal。

由于

Answer 1

事件处理程序获取一个事件对象，其引用引发了target中的事件 - 对于“click”，这是dom元素。请参阅下面的（未经测试的）代码：

$('table button').each((i,e)=>{
    e.addEventListener(
        'click',
        (e)=>{ 
            console.log('clicked', e.target.getAttribute('id'));
        }
    )
})

注意：这个^假设一个现代浏览器+ jquery。要测试它，只需将“表格按钮”更改为“div”并将其粘贴到您的控制台中，然后点击此页面上的任何div

所以重申一下，通过检查事件对象的target属性，你得到了点击的内容（没有正则表达式）。

如果您不熟悉javascript事件系统，它会比上面的代码更优雅。我建议你在闲暇时查看event bubbling的具体内容。

根据正则表达式

1 个答案: