使用来自特定按钮的信息显示模态

Question

我有一个 Django 模板，用于呈现有关用户的一些数据。 它是一个 for 列表，它遍历并为每个用户创建此元素。 我希望能够点击它并显示一个包含所有信息的模式。 所以如果我点击 user1，我会得到 user1 的信息，依此类推。 我不知道该怎么做。

我目前正在尝试使用 JavaScript 来做到这一点。 问题是我无法将数据从特定元素获取到 JavaScript 中。 我有模态工作，因为它弹出。 但是，我找不到从单击的特定用户那里检索数据的方法。

#dashboard.html
{% for party in parties %}
    <div class="userInfo">
        <img user="{{party}}" src="{% static 'restaurants/images/userIcon.png' %}">
        <div class="userText">
            <p>{{party.lastName}} </p></br>
        </div>
        <button name="remove"><a href="/restaurants/removeParty/{{party.id}}">Remove</a></button>
    </div>
{% endfor %}

我只需要通过单击的特定按钮将来自特定用户的数据获取到 js 中。 也许有更好的方法来做到这一点？ 我不确定。 我只需要能够使用来自点击的特定用户的数据填充模态。 上面的代码显示了创建用户信息的循环的 html。

Answer 1

根据您的对象有多大，它可能有点冗长，但您可以使用数据属性：

{% for party in parties %}
    <div class="userInfo" data-lastName="{{party.lastName}}" data-etc="{{party.etc}}">
        <img user="{{party}}" src="{% static 'restaurants/images/userIcon.png' %}">
        <div class="userText">
            <p>{{party.lastName}} </p></br>
        </div>
        <button name="remove"><a href="/restaurants/removeParty/{{party.id}}">Remove</a></button>
    </div>
{% endfor %}

然后在单击打开模态时访问它们：

const users = document.querySelectorAll('.userInfo');

for (let i = 0; i < users.length; i++) {
  users[i].addEventListener('click', function() {
    const userData = {
           lastName: this.dataset.lastName,
           etc: this.dataset.etc
        }
    openMyModal(userData);
  })
}
})