javascript_javascript 기술에서 숨겨진 레이어를 표시하는 더 나은 방법 분석

이것은 Q&A 페이지입니다. 디자이너는 관련 질문을 클릭하면 해당 답변이 그 아래에 표시되기를 바랍니다. 이는 비교적 일반적인 기능입니다. 일반적인 해결 방법은 "답변"을 전체 질문 컨테이너의 하위 요소로 처리한 다음 상위 요소의 버튼을 클릭하여 해당 하위 요소를 확장하는 것입니다. 상위 요소와 하위 요소 간의 대응을 통해 제목과 답변을 일치시킵니다.

단, HTML 작성 시 스크립팅을 고려하지 않았기 때문에(요구사항은 추후 추가됨) 답변과 제목 사이에 상위-하위 관계가 없습니다. HTML 코드는 다음과 같습니다.

그래서 답변과 제목을 일치시키기 위해서는 또 다른 방법이 필요합니다. 요소의 위치를 ​​캡처하여 요소를 일치시킬 수 있습니다. 즉, 첫 번째 제목은 전체 시퀀스의 첫 번째 답변에 해당하고, 두 번째 제목은 두 번째 답변에 해당해야 합니다. 이러한 방식으로 HTML 구조에 관계없이 해당 통신을 제어할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

• 번호제목편집기/Asker



• 1작은 가게를 열려면 비용을 지불해야 하나요? 고객 서비스


• 
  이 단계에서는 Yuce가 수수료를 부과하지 않으므로 사용자는 걱정할 필요가 없습니다.
  
  부가 가치 서비스의 기능 모듈 외에도. 고객 서비스>
  
  
• 2열고 싶습니다. 매장에서 비용을 지불해야 하나요? ; /span>


• 
  이 단계에서는 비용이 청구되지 않습니다. 걱정하지 마세요.
  
  부가 가치 서비스의 기능 모듈 외에도. 고객 서비스>
  

스크립트 설명: openLink 아이콘을 클릭하면 openLink와 동일한 위치의 답변이 표시됩니다. 여기서는 onclick 이벤트를 클로저 안에 넣고 for 루프가 활성화되기 전에 끝날 때까지 기다려야 합니다. 그러한 클로저가 없으면 어떤 openLink를 클릭하더라도 openLink.length 값이 표시됩니다.

코드 복사 코드는 다음과 같습니다.

document.getElementsByClassName = function( eleClassName)
{
var getEleClass = [];//배열 정의
var myclass = new RegExp("\b" eleClassName "\b");//정규식 객체 생성
var elem = this.getElementsByTagName("*");//문서의 모든 요소 가져오기
for(var h=0;h{
var 클래스 = elem[ h ].className;//클래스 객체 가져오기
if (myclass.test(classes)) getEleClass.push(elem[h]);//정기 비교, 원하는 CLASS 객체 가져오기
}
return getEleClass;//Return array
}
//클래스를 캡처하는 방법입니다. 복사해서 사용하면 괜찮습니다.

var Answer = document.getElementsByClassName("answer");
var openLink = document.getElementsByClassName("openLink")
var closeLink = document.getElementsByClassName("closeLink"); >
for (i = 0; i{
(
function(i){
openLink[i].onclick = function(){
var j = i;
answer[j].style.display = "block"
}
closeLink[i].onclick = function (){
var j = i; 답변[j].style.display = "없음"
}
}
)(i)
}