【问题标题】:How to get each array value outside loop to modal?如何将循环外的每个数组值转换为模态?
【发布时间】:2021-12-09 00:49:43
【问题描述】:

我在 JS 和下面的代码中有这个。我想将数据 ID 发送到模式中,并且在关闭模式以关闭数据 ID 时。我怎么能用javascript来做到这一点???

fetch("https://data.uk/api/" + $searchValue).then(
            res => {
                res.json().then(
                    data => {
                        if (data.length > 0) {

                            var temp = "";
                            temp += "<thead>";
                            temp += "<tr>";
                            temp += "<th>ID</th>";
                            temp += "<th>Force Name</th>";
                            temp += "<th>Details</th>";
                            temp += "</tr>";
                            temp += "</thead>";
                            temp += "<tbody>";

                            data.forEach((itemData) => {
                                temp += "<tr><td>" + itemData.id + "</td>";
                                temp += "<td>" + itemData.name + "</td>";
                                temp += "<td><a href='#' data-id='" + itemData.id + "' data-toggle='modal' data-target='#myModal'>More Detail</a></td></tr>";
                            });
                            temp += "</tbody>";
                            document.getElementById('data').innerHTML = temp;
                        }
                    }
                )
            }
        )

我想使用这个将每个数据 ID 值转换为模态

$("myModal").on("show.bs.modal", function(e) {
    var b = $(e.relatedTarget);
    var r = b.data("id");
    var modal = $(this);
    modal.find("#me").text(r);
})

这是我的模态,我希望当我打开模态时能够捕获数据 ID 并将其显示在 id="me"

<div class="modal-body" id="modal-body">
                    <div class="row m-0">
                        <div class="col-4">
                            People name & twitter
                        </div>
                        <div class="col-8">
                            Descriptions
                            <h2 id="me"></h2>
                        </div>
                    </div>
                </div>

【问题讨论】:

  • 嗨,您解决了这个问题还是还在寻找答案?

标签: html jquery foreach modal-dialog


【解决方案1】:

您可以使用dataset 属性访问data-... 属性,例如给定

<div id="my-element" data-id="myData"></div>

你可以得到它

document.getElementById("my-element").dataset.id

【讨论】:

  • 这不起作用,因为链接标签在 js 中,我希望在打开模式时能够将该链接的数据 ID 发送到 h2 id="me"
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-11-04
  • 2022-01-22
  • 1970-01-01
  • 1970-01-01
  • 2020-04-06
  • 1970-01-01
相关资源
最近更新 更多