使用來自特定按鈕的信息顯示模態

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