显示 textarea 或 div（就在要回复的评论下方），当我点击评论系统 javascript 上的回复按钮而不是 jquery

Question

所以我正在尝试在我的新站点中创建一个评论系统。所有 cmets 都有一个回复按钮，其 id 为“replybtn”，点击时我想在id 为“replyform”的 div，位于相应评论的正下方。我正在使用 php,mysql 来检索 cmets。

<div class='cmt'>
    <div class='cmttext'></div>
    <div id='replybtn'></div>
    <div id='replyform'>
       <form method='post' ..... >
          <textarea name='reply' ></textarea>
          <input type='submit' />
       </form>
    </div>
</div>

谢谢。这是我在 stackoverflow 上提出的第一个问题，如果我没有提供足够的信息，请见谅。

Answer 1

试试这个。它是纯 JavaScript。在下面修改你想要的。 :) 我更新了。

var varHtml = "<form method='post' ..... ><textarea name='reply' ></textarea> <input type='submit' /> </form>";


var allElements = document.body.getElementsByClassName("replybtn");

var addCommentField = function() {
  for (var i = 0; allElements.length > i; i++) {
    if (allElements[i] === this) {
      console.log("this " + i);

      if (document.getElementsByClassName("replyform")[i].innerHTML.length === 0) {
        document.getElementsByClassName("replyform")[i].innerHTML = varHtml;
      }

    }
  }
};


for (var i = 0; i < allElements.length; i++) {
  allElements[i].addEventListener('click', addCommentField, false);
}

<div class='cmt'>
  <div class='cmttext'></div>
  <button class='replybtn'>replybtn</button>
  <div class='replyform'></div>
</div>
<div class='cmt'>
  <div class='cmttext'></div>
  <button class='replybtn'>replybtn</button>
  <div class='replyform'></div>
</div>
<div class='cmt'>
  <div class='cmttext'></div>
  <button class='replybtn'>replybtn</button>
  <div class='replyform'></div>
</div>