JavaScript - 토글 기능

크롬 확장에 정의한 JS 기능을 숨기거나 표시하려고합니다.JavaScript - 토글 기능

나는 지금까지 무엇을 가지고 : 그러나 그것은 unclickable입니다

dspan.className = "cExtension"; 

//Create toggle button: 

function createToggleButton(){ 
    var toggleButton = document.createElement("button"); 
    toggleButton.innerHTML = "Toggle Overlay"; 
    toggleButton.id = "Toggle" 
    var header = document.getElementById("header"); 
    header.appendChild(toggleButton); 
    toggleExtension(); 
} 

// find all spans and toggle display: 

function toggleExtension(){ 
    var spans = document.getElementsByTagName('span'); 
    var toggle = function() {  
     for (var i = 0, l = spans.length; i < l; i++) { 
      if (spans[i].getAttribute('class') == 'cExtension') 
       if (spans[i].style.display == 'none') spans[i].style.display = ''; 
       else spans[i].style.display = 'none'; 
     } 
    } 
    document.getElementById('Toggle').onclick = toggle; 
}

버튼 헤더에 표시 : 내가 숨기려고하고 스팬 클래스는 라벨이다. document.getElementById('Toggle').onclick = toggle;을 document.getElementById('Toggle').onclick = alert{"Hello");으로 변경하면 onclick이 아닌 페이지로드시 경고가 트리거됩니다. 나는 이것을 순수한 JS로 처리하려고 노력하고있다. 내가 어디로 잘못 가고 있니?

출처

2013-07-02 Yogzzz

잘 작동 여기 : http://jsfiddle.net/SdHm9/ –

여전히 작동 onclick 얻을 수 있습니다. 이것이 그럴 것 같지는 않지만 Chrome 확장 프로그램에 있기 때문에 다른 작업이 필요합니까? – Yogzzz

먼저 document.getElementById("Toggle").onclick = alert("Hello");은 경고 기능 자체가 아닌 경고 기능이 반환하는 값으로 onclick 이벤트를 설정합니다. 따라서 경고 기능은 페이지로드시 발생하므로 반환 할 항목을 파악할 수 있습니다. 그래서 당신은 이것을 할 수 있습니다 : document.getElementById("Toggle").onclick = function(){alert("Hello");}; 그리고 그 수도 있습니다.

편집 : 여기에있는 모든 항목을 스크래치 : 변수를 toggleExtension의 함수로 설정하지 않았습니다.

모든 것을 테스트하지는 않았으므로 모든 경우에 적용될 수 있다고 보장 할 수는 없습니다.

출처

2013-07-02 17:57:42

'toggleExtension' 함수를 실제로 호출합니까? 왜냐하면 onclick 이벤트가 설정되지 않는다면 그렇습니다. –

-3

왜 jQuery를 사용하지 않습니까?

모든 힘든 일을 할 것입니다.

http://api.jquery.com/toggle/

건배!

출처

2013-07-02 18:10:05

http://meta.stackexchange.com/a/48195/210016 –

가시가 제거 설정되어있는 경우는, 그렇지 않으면

div.classList.toggle("visible");

추가/테스트 조건에 따라 볼 제거 추가 내가 미만 10

div.classList.toggle("visible", i < 10);

확인 브라우저 지원합니다 : http://caniuse.com/#feat=classlist

을

출처

2017-07-05 15:04:49 Muhammed

JavaScript - 토글 기능

답변

관련 문제