如何使用javascript forloop在点击时获取html中data-id的值并返回值

Question

这是我的html

       <ul class="conversations">
            {% if t_ques %}
                <li class="grouping">Today</li>
                {% for item in t_ques %}
                    <li class="active">
                        <a id="convers" class="conversation-button text-[#E8F5FC] my-2" href="{% url 'assistant:continuechat' item.pk %}" data-pk="{{item.pk}}">
                            <i class="fa fa-message fa-regular"></i> {{item.title| truncatewords:04 }}
                        </a>
                        <div class="fade"></div>
                        <div class="edit-buttons">
                            <button><i class="fa fa-edit"></i></button>
                            <button class="trash" data-id = "{{item.pk}}"><i class="fa fa-trash"></i></button>
                        </div>
                    </li>
                {% endfor %}
            {% endif %}
            {% if y_ques %}
                <li class="grouping">Yesterday</li>
                {% for item in y_ques %}
                    <li>
                        <a id="convers" class="conversation-button text-[#E8F5FC] my-2" href="{% url 'assistant:continuechat' item.pk %}" data-pk="{{item.pk}}">
                            <i class="fa fa-message fa-regular"></i>  {{item.title| truncatewords:04 }}
                        </a>
                        <div class="fade"></div>
                        <div class="edit-buttons">
                            <button><i class="fa fa-edit"></i></button>
                            <button class="trash" data-id = "{{item.pk}}"><i class="fa fa-trash"></i></button>
                        </div>
                    </li>
                {% endfor %}
            {% endif %}
            {% if s_ques %}
                <li class="grouping">Previous 7 days</li>
                {% for item in s_ques %}
                    <li>
                        <a id="convers" class="conversation-button text-[#E8F5FC] my-2" href="{% url 'assistant:continuechat' item.pk %}" data-pk="{{item.pk}}">
                            <i class="fa fa-message fa-regular"></i>  {{item.title| truncatewords:04 }}
                        </a>
                        <div class="fade"></div>
                        <div class="edit-buttons">
                            <button><i class="fa fa-edit"></i></button>
                            <button class="trash" data-id = "{{item.pk}}"><i class="fa fa-trash"></i></button>
                        </div>
                    </li>
                {% endfor %}
            {% endif %}
            {% if more_s_ques %}
                <li class="grouping">Previous 30 days</li>
                {% for item in more_s_ques %}
                    <li>
                        <a id="convers" class="conversation-button text-[#E8F5FC] my-2" href="{% url 'assistant:continuechat' item.pk %}" data-pk="{{item.pk}}">
                            <i class="fa fa-message fa-regular"></i>  {{item.title| truncatewords:04 }}
                        </a>
                        <div class="fade"></div>
                        <div class="edit-buttons">
                            <button><i class="fa fa-edit"></i></button>
                            <button class="trash" data-id = "{{item.pk}}"><i class="fa fa-trash"></i></button>
                        </div>
                    </li>
                {% endfor %}
            {% endif %}
        </ul>
   </div>

我一直在尝试使用 JavaScript 单击时获取任何 data-pk 的值，但似乎无法实现。这一直说 currentTarget 未定义，当我用 target 替换它时，它说同样的事情。然后，如果我将其替换为 document.querySelector("#convers")，它只会给出第一个值，无论单击哪个

这是我的 JavaScript

    const conversationButtons = document.querySelectorAll("#convers");
    conversationButtons.forEach(button => {
        button.addEventListener("click", getId);
    });

    function getId(e){
        var idValue = e.currentTarget.getAttribute('data-pk');
        console.log(idValue); //output corresponding target-id

        if(!chat_id){
            url = `/chat-previous/${idValue}/`
        }else{
            url = 'initiate-chat/'
        }

        return url;
    }

    $.ajax({
        type: 'POST',
        url: getId(),
        data: {
            message: usermsg,
            chatId: chat_id,
            // itemId: item_id,
            csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
            action: 'post'
        },
        success: function(json){
            const res = json['chats']
            setTimeout(() => {
                hideTyping();
                body.appendChild(mgses(res, "assistant"));
                scrollToBottomOfResults();
            }, 1000);
            console.log(json)
        },
        error: function(rs, e){
            setTimeout(() => {
                hideTyping();
                body.appendChild(setBotResponse("bot"));
                scrollToBottomOfResults();
            }, 600);
            console.log(rs.error);
        },
    });

我使用了其他方法，例如

    const getId = () => {
        console.log(document.querySelector(".conversation-button").getAttribute('data-pk'))
         if(!chat_id){
             url = `/chat-previous/${document.querySelector(".conversation-button").getAttribute('data-pk')}/`

      
         }else{
             url = 'initiate-chat/'
    
         }
    
        return url;
    }

    conversationButtons.forEach(button => {
       button.addEventListener("click", getId);
        console.log(button.getAttribute('data-pk'));
    });

仍然无法得到我真正想要的。有什么方法可以实现这个目标吗？

Answer 1

委托并使用按钮的类

document.querySelector('.conversations').addEventListener('click', (e) => {
  let tgt = e.target.closest('.conversation-button');
  if (!tgt) return;
  const idValue = tgt.dataset.pk;
  console.log(idValue); //output corresponding target-id
  return chat_id ? 'initiate-chat/' : `/chat-previous/${idValue}/`
})

Answer 2

您做出了多个错误的假设，第一个是您不能有多个具有相同 id 的元素，这将导致您描述的确切行为“它需要第一次出现的 id”

第二件事是你可能想在点击时发出ajax请求，但你构建代码的方式并不能做到这一点。

要解决这些问题，请生成如下 html

   button.conversation-button
   button.conversation-button
   button.conversation-button

然后向所有具有

.conversation-button

类的元素添加一个事件侦听器，并将您的 ajax 调用包装到一个函数中，主要是您已经拥有的函数。

const conversationButtons = document.querySelectorAll(".conversation-button");
conversationButtons.forEach(button => {
    button.addEventListener("click", doStuff);
});


...
function doStuff(e) {
   $.ajax( ...
     url: getId(e)
...
}

function getId(e) {
  let idValue = e.currentTarget.getAttribute('data-pk');
  let url = ...;
  ...
  return url; // 
}

只是一些伪代码让你得到一个想法，祝你好运:)