document.getElementById (id) 및 여러 ID 전환하기

웹 페이지의 숨겨진 요소를 토글하는 간단한 기능이 있습니다.document.getElementById (id) 및 여러 ID 전환하기

function showtable(id) 
{ 
if(document.getElementById(id).style.display == 'block') 
    { 
document.getElementById(id).style.display = 'none'; 
    }else{ 
document.getElementById(id).style.display = 'block'; 
} 
} 


<input type="button" value="Toggle" onclick="showtable('id');" />

이 잘 작동하지만 페이지마다 버튼 (에 있는지 또는 해제, 전환되고있는 일 제외) (특정 ID를 가진) 다른 (테이블) 요소를 전환 할 클릭합니다.

출처

2012-08-04 user1575698

목표는 실현 불가능하다 . 명확히하십시오. 당신이 이것을하는 이유를 설명하는 것이 도움이 될 수도 있습니다. –

모호한 점에 대해 사과드립니다. 나는 나의 질문을 편집했다. 두 개의 테이블 요소가 동시에 표시되는 경우 잘 보이지 않으므로 이미 표시된 다른 테이블 요소를 숨길 필요가 있습니다. 나는 한 순간에 오직 하나의 테이블 요소가 보이도록 만들고 싶습니다. – user1575698

jQuery를 사용할 수 있지만 사용하고 싶지 않으면; 다음은 순수한 자바 스크립트 예제입니다. 작동 방법을 보려면 텍스트 파일에 복사하여 붙여넣고 test.htm 파일로 저장 한 다음 브라우저에서 엽니 다. 여기에는 3 개의 테이블이 있으며 각 테이블 위에는 버튼이 있습니다. 버튼을 클릭하면 테이블이 표시되고 다른 모든 테이블은 숨겨집니다.

var ids = ["redTable", "greenTable", "blackTable", "anotherTable"];

당신은 또한 테이블을 전환 할 수있게하려면, 그것은 물론 또한 버튼이 필요 해제합니다 : 당신이 더 많은 테이블이 필요하면, 그들에게 ID를 부여하고, 함수에서 배열에 자신의 ID를 추가 :

<input type="button" value="Toggle Green Table" onclick="showtable('anotherTable');" />

예 : (당신의 버튼 포함) none` 너무 그 모든 자손을 숨 깁니다 : "다른 모든 요소"는`body` 요소를 포함하고`설정하는 화면이 때문에

<!DOCTYPE html> 
<html> 
    <head> 
     <script type="text/javascript"> 
      function showtable(id) { 
       var ids = ["redTable", "greenTable", "blackTable"]; 
       for(var i = 0; i < ids.length; i++) { 
        if(ids[i] != id) 
         document.getElementById(ids[i]).style.display = "none"; 
       } 
       document.getElementById(id).style.display = "block"; 
      } 
     </script> 
    </head> 
    <body> 
     <input type="button" value="Toggle Red Table" onclick="showtable('redTable');" /><br /> 
     <table style="width: 100px; height: 100px; background-color: red;" id="redTable"> 
      <tr> 
       <td>redTable</td> 
      </tr> 
     </table> 
     <input type="button" value="Toggle Green Table" onclick="showtable('greenTable');" /><br /> 
     <table style="width: 100px; height: 100px; background-color: green; display: none;" id="greenTable"> 
      <tr> 
       <td>greenTable</td> 
      </tr> 
     </table> 
     <input type="button" value="Toggle Black Table" onclick="showtable('blackTable');" /><br /> 
     <table style="width: 100px; height: 100px; background-color: black; display: none;" id="blackTable"> 
      <tr> 
       <td>blackTable</td> 
      </tr> 
     </table> 
    </body> 
</html>

출처

2012-08-04 08:25:15 Tom

마치 마법처럼 작동합니다. – user1575698

다른 모든 DOM 요소를 선택하고 표시 속성을 "none"으로 설정 한 다음 표시되어야하는 요소 만 표시 할 수 있습니다.

또 다른 방법은 변수에 보이는 요소를 추적하는 것입니다 : 당신이 요소를 전환 할 때

var visibleElement = null;

, 당신이 한 눈에 보이는 요소가 숨길 수 있는지 확인 이전에 볼 하나를

// Hide the previously visible element, if any. 
if (visibleElement != null) 
{ 
    visibleElement.style.display = 'none'; 
} 

// Make your new element the visible one. 
visibleElement = document.getElementById(id) 
visibleElement.style.display = 'block';

출처

2012-08-04 07:58:22 svanryckeghem

간편한 사용 jQuery. 예를 들어, JS에 toggle_element 다음과 같이 각각의 소자를 전환하는 클래스를 제공하고 :

$('.toggle_element').hide(); 
$('#id').show();

이 클래스 toggle_element 모든 원소를 감추고 ID id로 소자를 표시한다.

JSFiddle 예제 here.

출처

2012-08-04 08:05:16 Kurt

OP에서 원시 JavaScript를 사용하고있는 질문에 왜 jQuery 솔루션을 제공합니까? – Tadeck

@Tadeck - OP가 jQuery를 사용하여 쉽게 구현할 수있는 작업을하고 있기 때문에 감히이 말을 알 수 없다고 말합니다. – Kurt

이것은 매우 간단한 작업이며 OP가 겉으로보기에는 jQuery를 사용하지 않으므로 전체 자바 스크립트를 추가 할 것을 제안하지 않습니다. 이 작업을 수행하기위한 프레임 워크. 받아 들인 대답을보고 순수한 JavaScript에서도 쉽게 달성 할 수 있는지 확인하십시오. 어쨌든 당신은 이미 jQuery를 사용하는 사람들에게 좋은 대안을 제시해주었습니다. – Tadeck

document.getElementById (id) 및 여러 ID 전환하기

답변

관련 문제