一次只顯示一個div

-1

我試圖讓一些按下一次只顯示一個div的按鈕。所以當他們點擊另一個按鈕時，彈出相應的div並隱藏最後一個。一次只顯示一個div

我試過一個循環：

function display(x) { 

    for (i=0; i<content.length; i++){ 
     content[i].style.display = 'none'; 
    } 

    if(x = content[i]){ 
     x.style.display = 'inline'; 
    } 
}

這並沒有做任何事情。

我試圖在循環內嵌套if語句，但它導致所有可見。

我已經鏈接下面的jsfiddle。

請不要jQuery的答案，因爲我想先學習純JavaScript。

在此先感謝。
https://jsfiddle.net/ethacker/rp59g9cf/

來源

2016-12-26 ethacker

這是因爲'我'將='content.length'，在你的for（）中，''i'每次運行時都會+1，所以在你的循環結束時它會定位到'content'的最後一個數組元素。試着將你的if條件放在for循環中？ – NewToJS

也不知道你爲什麼以每個按鈕[]爲目標。爲什麼不在'for（）'循環中運行它們並使用'i'來設置事件調用？示例'buttons [i] .addEventListener（「click」，function（）{display（content [i]）};'因爲按鈕的索引等於您要傳遞的content []的索引。 – NewToJS

你是不是把if內循環。因此，它只會檢查最後一個值i。另外，等於應該是==。你應該做的是這樣的：

function display(x) { 

    for (i=0; i<content.length; i++){ 
     if(x == content[i]){ 
      x.style.display = 'inline'; 
     } else { 
      content[i].style.display = 'none'; 
     } 
    } 

}

來源

2016-12-26 17:34:05

它不工作的部分原因是他有'if（x = content [i]）'，這不起作用，應該是'if（x === content [i]）'。編輯：剛纔看到你已經這樣做了！ –

@SHBelsky是的，我糾正了 –

我剛剛注意到，你可以忽略我提出的改變。:) –

看到這個fiddle example代碼我稍微修改代碼

var currDisplayElm; 
//function 
function display(content) { 

    if(currDisplayElm) 
     currDisplayElm.style.display = 'none'; 

    currDisplayElm = content; 
    content.style.display = 'inline'; 
}

來源

2016-12-26 17:39:43 azad

據我瞭解。 Ithink如果你點擊按鈕調用函數，然後按順序設置div ID，你應該傳遞你想要顯示的div號。和div名稱必須相同，那麼您可以隱藏其他div。我希望你明白..

來源

2016-12-26 17:48:19 Bhavika

一次只顯示一個div

回答

相關問題