javascript - jQuery:避免分配不同的 id 来切换重复的元素

Question

使用 SCSS 作为 CSS 预处理器和 jQuery 我通过下面的代码获得了评论部分。我希望 .comment-box 只会显示其各自的回复按钮，即在单击的按钮下方，而不是显示在所有现有的 .reply-btn 下方。我想避免为每个评论框编写单独的#id...

这怎么能做到呢？我尝试使用

$("<div class='comment-box'/>")

在 jQuery 代码中，但没有成功 =(

预先感谢您的帮助!

P.S.:这是我的CodePen，以防您觉得更容易 https://codepen.io/fergos2/pen/BaaqVOv

$(document).ready(function() {
  
  // showing the comment section
  $('.comment-btn').click(function() {
    $('.comment-btn').toggleClass('active');
    $('.comments-container').toggleClass('active');
  });
  
  // showing the comment box within comments
  $('.reply-btn').click(function() {
    $('.reply-btn').toggleClass('active');
    $('.comment-box').toggleClass('active');
  });
});

body {
  background-color: #BFF5FF;
  margin: 0;
  padding: 40px;
}

.main-container {
  width: 50vw;
  margin: 0 auto;
}

.post-container {
  background-color: white;
  border: 1px solid darkgrey;
  padding: 20px 20px 0 20px;
}

.comment-btn {
    text-decoration: none;
    padding: 10px;
    display: flex;
    justify-content: flex-end;
    
    > i {
      color: #03CCF2;
    }
  }

.comment-btn.active {
  > i {
    color: #D95FA4;
  }
}

.comments-container {
  display: none;
  
  .comment {
    background-color: white;
    padding: 10px;
    opacity: .8;
    border-radius: 100px;
    overflow-wrap: break-word;
    margin-block-start: 10px;
  }
  
  .comment-reply {
    margin-left: 50px;
  }
  
  .reply-btn {
    font-size: 10px;
    color: blue;
    text-decoration: none;
    
    &--comment {
      padding-left: 10px;
    }
    
    &--reply {
      padding-left: 60px;
    }
  }
  
  .reply-btn.active {
    color: #D95FA4;
  }
}

.comments-container.active {
  display: block;
}

.comment-box-main, 
.comment-box {  
  form {
    input {
      margin-top: 10px;
      outline: none;
      border: 1px solid black;
      border-radius: 100px;
      width: 100%;
      padding: 10px 0;
      padding-left: 10px;
    }
  }
}

.comment-box {
  display: none;
}

.comment-box.active {
  display: block;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<div class="main-container">
  <div class="post-container">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo rem consectetur, delectus distinctio similique est saepe, maxime veniam culpa eius aliquid iusto voluptas dolore soluta libero, repudiandae harum natus a.
  <a href="#" class="comment-btn"><i class="fa fa-comment"></i></a>
</div>

  <div class="comments-container">
    <div class="comment-list">
     <div class="comment">Lorem ipsum dolor sit amet consectetur adipisicing elit. 
  </div>
  <a href="#" class="reply-btn reply-btn--comment">Reply</a>
  <div class="comment-box">
    <form>
      <input type="text" placeholder="Write a reply...">
    </form>
  </div>
  <div class="comment comment-reply">Some reply</div>
  <a href="#" class="reply-btn reply-btn--reply">Reply</a>
  <div class="comment-box">
    <form>
      <input type="text" placeholder="Write a reply...">
    </form>
  </div>
  <div class="comment comment-reply">Some reply</div>
  <a href="#" class="reply-btn reply-btn--reply">Reply</a>
  <div class="comment-box">
    <form>
      <input type="text" placeholder="Write a reply...">
    </form>
  </div>
  
  <div class="comment">Lorem ipsum dolor sit amet consectetur adipisicing elit. 
  </div>
  <a href="#" class="reply-btn reply-btn--comment">Reply</a>
  <div class="comment-box">
    <form>
      <input type="text" placeholder="Write a reply...">
    </form>
  </div>
  <div class="comment">Lorem ipsum dolor sit amet consectetur adipisicing elit. 
  </div>
  <a href="#" class="reply-btn reply-btn--comment">Reply</a>
  <div class="comment-box">
    <form>
      <input type="text" placeholder="Write a reply...">
    </form>
  </div>
  </div>
    <div class="comment-box-main">
      <form>
        <input placeholder="Write a comment..."></input>
      </form>
    </div>
  </div>
  
</div>

Answer 1

处理给定的代码和 HTML 结构，您可以尝试:

// showing the comment box within comments
$('.reply-btn').click(function(e) {
    $(e.target).toggleClass("active");
    $(e.target).next().toggleClass("active");
});

它利用了这样一个事实:您的“回复按钮”会触发一个事件，您可以从中读取到底单击了哪个“回复”按钮(e.target)。然后切换该元素的类及其旁边的类(回复部分)。