홈>
각 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
관련 자료
- javascript - 외부 클릭시 두 번째 요소가 닫히지 않음
- dependencies - 다른 라이브러리를로드하는 동안 C # 클래스 라이브러리에서 FileNotFoundException이 발생 함
- javascript - 모든 요소에 동일한 클래스가 포함되어 있는지 확인
- java - 번들을 생성하는 동안 중복 된 DatabindingComponent 클래스가 발견되었습니다
- android - 다른 클래스의 클래스 필드를 참조하는 방법은 무엇입니까?
- json - for 루프에 요소를 추가하는 동안 파이썬 컬렉션 요소가 재정의 됨
- python - 유형의`__init__` 또는`__new__`를 다른 클래스 인스턴스에 바인딩하는 방법은 무엇입니까?
- C ++ 다른 클래스를 사용하는 클래스
- java - 다른 클래스의 함수 호출을 사용한 While의 시간 복잡성
- 동일한 클래스를 가진 요소를 평범한 Javascript로 나란히 감싸십시오
- javascript - 하위 요소의 클래스를 어떻게 대체합니까?
- python - Selenium Webdriver로 요소를 찾는 동안 '{}' format ()을 올바르게 사용하는 방법
- mysql - 다른 형식으로 변환하는 동안 다른 열의 DATETIME으로 열을 자동으로 채 웁니다
- javascript - className이있는 요소를 idName이있는 다른 요소에 추가
- swift - 애니메이션을 사용하여 이동하는 동안 요소의 오프셋 가져 오기
- javascript - 클래스별로 요소의 값을 확인하고 요소가 있으면 값을 편집하고 그렇지 않으면 새 HTML을 추가하십시오
- html - javascript - 작동하지 않는 클래스 별 요소 클릭
- python 3.x - 클래스 이름으로 Selenium 찾기 요소가 작동하지 않습니다
- python - dict의 요소를 키 조건으로 다른 dict에 추가
- java - 프로그램이 무한 루프에있는 동안 다른 버튼을 어떻게 클릭합니까?
관련 질문
- javascript : js 소스 파일 이름 바꾸기
- javascript : Jquery-validaton + Bootstrap v4.6 + Symfony v5.2를 사용한 입력 유효성 검사
- javascript : 같은 클래스를 사용하는 하나의 div 전환
- javascript : 텍스트가 오버플로되면 더 많은 버튼 표시를 전환하는 방법
- JavaScript ES6에서 양식 값을 json으로 가져오고 API에 게시
- Rails 6 : SimpleFrom Remote : true javascript /Jquery를 통한 제출
- javascript : JQuery는 ID 및 클래스의 모든 노드를 가져옵니다.
- javascript : html /css의 토글 버튼 링크
- javascript : 더 많은 클릭 같은 선택자?
- javascript : DOM에 삽입 된 contenteditable이 작동하지 않습니다.
openForm()
에 하나의 함수 만 사용하십시오. 인수로 열려고하는 것을 해결하십시오.html은
myForm1
로 시작해야합니다 그런 다음myForm2
등등각 갤러리 사진에 대해 기능을 생성 할 필요가 없습니다. 도움이 되길 바랍니다 ....