>

각 img 요소에 주석 상자가 첨부되어 있어야하는 갤러리 페이지에서 작업 중입니다.

댓글 버튼을 클릭 할 때마다 댓글 상자가 표시되지만 새 댓글 상자를 여는 중에 다른 열린 댓글 상자를 닫는 데 문제가 있습니다.

즉, 한 번에 하나의 요소 만 열고 싶습니다.

많은 javascript/jquery 함수를 시도했지만 도움이되지 않는 것 같습니다. 마지막으로 시도한 버튼은 클릭 한 버튼이있는 주석 상자를 제외한 다른 모든 주석 상자를 엽니 다.

$('body').on("click touchstart", ".openOne", function(e) {
    $('.chat-popup').toggle();
});
function openForm() {
  document.getElementById("myForm").style.display = "block";
}
function closeForm() {
  document.getElementById("myForm").style.display = "none";
}
function openForm1() {
  document.getElementById("myForm1").style.display = "block";
}
function closeForm1() {
  document.getElementById("myForm1").style.display = "none";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- html for form 1 and button 1 -->
<a title="Comment" class="lk-btn openOne" onclick="openForm()"> Comment</a>
<div class="chat-popup" id="myForm">
  <form name="commentForm" class="form-container">
    <div class="screen" class="screen"></div>
    <textarea id="myComment" class="input" placeholder="Type comment.." autofocus></textarea>
    <button id="submit" class="lk-btn openOne" 
        onclick="postComment(); clearText(); return false">Send</button>
    <button class="lk-btn openOne" 
        onclick="closeForm(); clearText(); return false">Close</button>
    <div id="commentBox" class="comment-box"></div>
  </form>
</div>
<!-- html for form 2 and button 2 -->
<a title="Comment" class="lk-btn openOne" onclick="openForm()"> Comment</a>
<div class="chat-popup" id="myForm">
  <form name="commentForm" class="form-container">
    <div class="screen" class="screen"></div>
    <textarea id="myComment" class="input" placeholder="Type comment.." autofocus></textarea>
    <button id="submit" class="lk-btn openOne" 
        onclick="postComment(); clearText(); return false">Send</button>
    <button class="lk-btn openOne" 
        onclick="closeForm1(); clearText(); return false">Close</button>
    <div id="commentBox" class="comment-box"></div>
  </form>
</div>


  • 답변 # 1

    openForm() 에 하나의 함수 만 사용하십시오.  인수로 열려고하는 것을 해결하십시오.

    function openForm(number) {
      $('.chat-popup').css('display','none');
      $('#myform' + number).css('display','block');
    }
    function closeForm() {
      $('.chat-popup').css('display','none');
    }
    
    

    html은 myForm1 로 시작해야합니다  그런 다음 myForm2  등등

    <a title="Comment" class="lk-btn openOne" onclick="openForm()"> Comment</a>
        <div class="chat-popup" id="myForm1"> <!-- HERE THE CHANGE -->
          <form name="commentForm" class="form-container">
            <div class="screen" class="screen"></div>
            <textarea id="myComment" class="input" placeholder="Type comment.." autofocus></textarea>
            <button id="submit" class="lk-btn openOne" 
               onclick="postComment(); clearText(); return false">Send</button>
            <button class="lk-btn openOne" 
               onclick="closeForm(); clearText(); return false">Close</button>
            <div id="commentBox" class="comment-box"></div>
          </form>
        </div>
    
    

    각 갤러리 사진에 대해 기능을 생성 할 필요가 없습니다. 도움이 되길 바랍니다 ....

관련 자료

  • 이전 angular - 간격마다 Angular2 + http
  • 다음 sql server - erlang - odbc :mssql에서 유니 코드로 올바른 쿼리 결과를 얻을 수 없습니다