다양한 오버레이 ID를 처리하는 방법: 동일한 JavaScript 함수 사용

Question

<p>다른 링크에 대한 오버레이를 표시하고 싶습니다. 첫 번째 오버레이에는 이미지와 텍스트가 포함되어 있으며, 링크 2를 클릭하면 구조는 동일하지만 콘텐츠가 다른 오버레이 2가 표시되어야 합니다. 원하는 결과를 얻을 수 있도록 도와주세요. </p> <p> <pre class="brush:js;toolbar:false;">function on() { document.getElementById("overlay").style.display = "차단"; } 함수 on1() { document.getElementById("overlay1").style.display = "차단"; } 기능 끄기() { document.getElementById("overlay").style.display = "none"; }</pre> <pre class="brush:css;toolbar:false;">.img { 전환: 5s easy-in-out 변환; 변환: scale(1); 변환 원점: 0 0; } .img:호버 { 변환: 스케일(1.25) } #씌우다, #오버레이1 { 위치: 고정; 디스플레이: 없음; 너비: 100%; 높이: 100%; 상단: 0; 왼쪽: 0; 오른쪽: 0; 하단: 0; 배경색: 흰색; Z-색인: 77777772; 커서: 포인터; } #텍스트, #텍스트 1 { 위치: 고정; 최고: 20%; 왼쪽: 5%; //글꼴 크기: 50px; 검정색; // 변환: 번역(-50%,-50%); // -ms-변환: 번역(-50%,-50%); }</pre> <pre class="brush:html;toolbar:false;"><div id="overlay" onclick="off()"> <div id="텍스트"> <div style="너비: 48%; 부동:왼쪽">

XXX

ZZZ

<p style="font-size:14px;"> 계곡에 사는 사람들의 엄청난 재능을 발견하도록 도와주세요. </p> </div> <div style="너비: 50%; float:right; margin-top:-220px; "> <img class="img" style="높이:100%" src="http://cdn.dpmag.com/2016/06/boydB3_6881-683x1024.jpg"> </div> </div> <div style="padding:20px">

<a onclick="on()"></a> </div> <div id="overlay1" onclick="on1()"> <div id="text1"> <div style="너비: 48%; 부동:왼쪽"> <h2>AAA</h2>

MMM

<p style="font-size:14px;">계곡에 사는 사람들의 엄청난 재능을 발견하도록 도와주세요. </p> </div> <div style="너비: 50%; float:right; margin-top:-220px; "> <img class="img" style="높이:100%" src="http://cdn.dpmag.com/2016/06/002boydB37683-703x1024.jpg"> </div> </div> <div style="padding:20px">

<a onclick="on1()"></a> </div> </div> </div> <a onclick="on(id)"style="font-size: 11pt;">자세히 보기 -></a> <a onclick="on(id)"style="font-size: 11pt;">자세히 보기 -></a> 1. 목록 항목</pre> </p>

Answer 1

이를 구현하는 더 좋은 방법이 있지만 요구 사항에 따라 다음과 같이 동일한 기능에 다른 ids和actions作为params을 전달할 수 있습니다.

으아악 으아악 으아악