2016-01-22 81 views
0

我試過這個,但obv它沒有工作。我對JS很新,我該怎麼做?如何讓div在onclick nr 2之後消失?

function test() { 
       if(document.getElementById('div1').style.display = 'block'){ 
        document.getElementById('div1').style.display = 'none'; 
       } 
       if(document.getElementById('div1').style.display = 'none'){ 
        document.getElementById('div1').style.display = 'block'; 
       } 
    } 
+0

試試這個document.getElementById('div1')。hide(); –

+0

你可以發佈JS小提琴嗎?另外,如果我沒有錯,=是一個賦值操作符,並且==驗證它。 –

+0

@SatejS我甚至不能讓「塊」在小提琴中工作:S https://jsfiddle.net/7wfz63ue/1/ – anonym

回答

1

它不應該是=,它應該是在JavaScript if條件==和兩次if條件設置始終style.display = 'block',所以無論使用else if或者乾脆else

<div id="div1" style="display:block"></div> 

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

function test() { 
     if (document.getElementById('div1').style.display == 'block') { 
      document.getElementById('div1').style.display = 'none'; 
     } 
     else{ 
      document.getElementById('div1').style.display = 'block'; 
     } 
    } 
+0

OPS謝謝。它沒有幫助壽。當我有==時,「塊」甚至沒有完成。 ==是正確的。 – anonym

+0

我修改了代碼,它的工作原理 - 請嘗試。 –

1

你(修正後)的代碼將切換可見,但不會對第2次用戶點擊的一個元素不可見。

我設置了一個JSFiddle here,它使用普通的JavaScript來完成問題標題中要求的內容。

讓我們假設你的HTML看起來像這樣,有DIV擁有的「測試」一類的名字:

實現這一目標是一個數據元素添加到 DIV跟蹤
<div class="tester">This is a triumph.</div> 
<p>I'm writing a note here; huge success</p> 

的一種方式點擊次數,然後當點擊次數達到兩次時,我們將其隱藏起來。以上操作的代碼如下所示:

document.getElementsByClassName("tester")[0].onclick = function(targ) { 
    if(!targ.target.hasAttribute("data-click")) { 
     targ.target.setAttribute("data-click",0); 
    } 
    var currClicks = +targ.target.getAttribute("data-click"); 
    if(currClicks==2){ 
     targ.target.style.display = "none"; 
    } else { 
     targ.target.setAttribute("data-click", currClicks+1); 
    } 
}; 

同樣,這將讓你在你的問題問但它並沒有真正做你想做的不匹配您的代碼示例的功能。如果您需要更多的信息,請隨時提問,但我認爲這會讓您找到您想要的東西。