javascript - 为多个按钮添加事件监听器

Question

我有多个用户评论包含在 <article> 中具有相同的内容结构和相同的类别。我需要使用 js 进行操作的主要部分是，当单击回复按钮时，从每个用户评论中获取文本和属性值，然后将这些内容添加到表单输入值中。

这是html结构

<div class="comments">

  <article id="comment-1" class="comment parent">
    <span class='comment-author'>John Doe</span>
    <p class="body">Lorem ipsum  af farm-to-table brunch XOXO portland small batch edison bulb yr hella 3 wolf moon</p>
    <a id="de255ea0-ddde-11e9-84d7-5d6e5fd4ffd6" class="reply-btn"  title="de255ea0-ddde-11e9-84d7-5d6e5fd4ffd6">reply</a>
  </article>

  <!-- this one is reply for the first comment -->
  <article id="comment-1r1" class="comment reply">
    <span class='comment-author'>Jane</span>
    <p class="body">Lorem ipsum  af farm-to-table brunch XOXO portland small batch edison bulb yr hella 3 wolf moon</p>
    <a id="de255ea0-ddde-11e9-84d7-5d6e5fdjkl4m5" class="reply-btn"  title="de255ea0-ddde-11e9-84d7-5d6e5fd4ffd6">reply</a>
  </article>

  <article id="comment-2" class="comment reply">
    <span class='comment-author'>Foo</span>
    <p class="body">Lorem ipsum  af farm-to-table brunch XOXO portland small batch edison bulb yr hella 3 wolf moon</p>
    <a id="de255ea0-ddde-11e9-84d7-5d6e5fdj409d4" class="reply-btn"  title="de255ea0-ddde-11e9-84d7-5d6e5fd4ffd6">reply</a>
  </article>


</div>

<!-- the form -->
<form>
  <input class="replyThread" type="hidden" name="fields[replyThread]" value="">
                <input class="replyID" type="hidden" name="fields[replyID]" value="">
                <input class="replyName" type="hidden" name="fields[replyName]" value="">

</form

正如您所看到的，每个用户评论都有一个唯一的用户名，并且reply-btn上也有唯一的属性值。但他们通常有相同的类(class)。

这是我的解决方法

    const replyButton = document.querySelector('.reply-btn');
    const replyThread = document.querySelector('.replyThread');
    const replyID = document.querySelector('.replyID');
    const replyName = document.querySelector('.replyName');
    const threadValue = document.querySelector('.reply-btn').getAttribute("title");
    const idValue = document.querySelector('.reply-btn').getAttribute("id");
    const nameValue = document.querySelector('.comment-author');

    replyButton.addEventListener('click', (evt) => {
        replyThread.innerHTML = threadValue;
        replyID.innerHTML = idValue;
        replyName.setAttribute('value', nameValue.innerHTML );
    })

唯一的问题是该按钮似乎只适用于第一个评论，当我单击其他评论时什么也没有发生。我尝试使用 querySelectorAll 但不幸的是它可以与 addEventListener 一起使用

我的问题是如何使回复按钮正常工作并从正确的位置(每个用户评论)获取文本和属性值？

Answer 1

我会在 .comments 容器上使用事件委托(delegate):监视点击，如果点击的目标与 .reply-btn 匹配，则获取其 。 title 和 ID，并通过访问其容器中的 .comment-author 来获取线程标题，然后您可以将它们放入表单中:

const [replyThread, replyId, replyName] = document.querySelectorAll('form > *');

document.querySelector('.comments').addEventListener('click', ({ target }) => {
  if (!target.matches('.reply-btn')) {
    return;
  }
  replyId.value = target.id;
  replyThread.value = target.title;
  replyName.value = target.parentElement.querySelector('.comment-author').textContent;
});

<div class="comments">

  <article id="comment-1" class="comment parent">
    <span class='comment-author'>John Doe</span>
    <p class="body">Lorem ipsum af farm-to-table brunch XOXO portland small batch edison bulb yr hella 3 wolf moon</p>
    <a id="de255ea0-ddde-11e9-84d7-5d6e5fd4ffd6" class="reply-btn" title="de255ea0-ddde-11e9-84d7-5d6e5fd4ffd6">reply</a>
  </article>

  <!-- this one is reply for the first comment -->
  <article id="comment-1r1" class="comment reply">
    <span class='comment-author'>Jane</span>
    <p class="body">Lorem ipsum af farm-to-table brunch XOXO portland small batch edison bulb yr hella 3 wolf moon</p>
    <a id="de255ea0-ddde-11e9-84d7-5d6e5fdjkl4m5" class="reply-btn" title="de255ea0-ddde-11e9-84d7-5d6e5fd4ffd6">reply</a>
  </article>

  <article id="comment-2" class="comment reply">
    <span class='comment-author'>Foo</span>
    <p class="body">Lorem ipsum af farm-to-table brunch XOXO portland small batch edison bulb yr hella 3 wolf moon</p>
    <a id="de255ea0-ddde-11e9-84d7-5d6e5fdj409d4" class="reply-btn" title="de255ea0-ddde-11e9-84d7-5d6e5fd4ffd6">reply</a>
  </article>


</div>

<!-- the form -->
<form>
  Form
  <input class="replyThread" name="fields[replyThread]" value="">
  <input class="replyID" name="fields[replyID]" value="">
  <input class="replyName" name="fields[replyName]" value="">

</form>

虽然 querySelectorAll 也是可能的，但它需要为每个按钮添加一个单独的监听器，这有点过分了。 (事件委托(delegate)还允许动态添加元素的功能)。