顯示只有一個解決方案，「去激活」的其他溶液

Question

我試圖寫入一個腳本，顯示取決於兩個<p>元件的被點擊的兩個不同的文本（div多個）。點擊顯示<div>，但點擊一個後，另一個應該使用變量fin_var「停用」。 使用fin_var = false;停用不起作用。

如果我點擊第二個<p>後的第一個，也出現在第二<div>。非常感謝幫助！

這裏是代碼：

var fin_var = true; 
 

 
var sen_one = document.getElementById('sentence_one'); 
 
if (fin_var == true) { 
 
    sen_one.addEventListener('click', function() { 
 
    // show div1 
 
    fin_var = false; 
 
    }, false); 
 
} 
 
var sen_two = document.getElementById('sentence_two'); 
 
if (fin_var == true) { 
 
    sen_two.addEventListener('click', function() { 
 
    // show div2 
 
    fin_var = false; 
 
    }, false); 
 
}

<p id="sentence_one">Solution 1</p> 
 
<p id="sentence_two">Solution 2</p>

Answer 1

這是因爲addEventListener回調函數內的所有代碼將只有當用戶點擊，當你設置回調fin_var是執行真正。只有當單擊一個元素時，它纔會變爲false，但之後已經定義了回調點擊函數。

這裏是你應該做的，而不是：

var fin_var = true; 
 

 
var sen_one = document.getElementById('sentence_one'); 
 
sen_one.addEventListener('click', function() { 
 
    if (fin_var) { //it's the same as fin_var == true, for your purposes 
 
    // show div1 
 
    fin_var = false; 
 
    } 
 
}, false); 
 

 
var sen_two = document.getElementById('sentence_two'); 
 
sen_two.addEventListener('click', function() { 
 
    if (fin_var) { 
 
    // show div2 
 
    fin_var = false; 
 
    } 
 
}, false);

<p id="sentence_one">Solution 1</p> 
 
<p id="sentence_two">Solution 2</p>

這樣的回調函數通常定義，但在控制變量設置爲false，它什麼都不做。

Answer 2

下面是一些解決方案，單擊「運行代碼片段」在底部的工作演示

它通過宣佈其DIV應各自p節目的同時，隱藏所有其他

這種方法的優點在於，如果你在<p>, <div>, etc...上使用它來顯示/隱藏任何內容，並且它適用於任何數量的「按鈕」和「可顯示」，則無關緊要。此外，忽略化妝品CSS（其中不該解決方案的比對原始問題和接受的答案，並避免甚至更少的代碼）部分重複：d

document 
 
    .querySelectorAll('[toggle]') 
 
    .forEach((toggle) => toggle.addEventListener('click', toggles)) 
 
    
 
function toggles() { 
 
    var shouldShow = this.getAttribute('toggle') 
 
    
 
    document.querySelectorAll('.toggleable').forEach((toggleable) => { 
 
    var toggleId = toggleable.getAttribute('id') 
 
    
 
    toggleable.classList[(toggleId == shouldShow)? "remove" : "add"]('hidden') 
 
    }) 
 
} 
 

.hidden { 
 
    display: none 
 
} 
 

 
/* CSS after this comment NOT NEEDED */ 
 
#sentence_one, #div_one { 
 
    background-color: pink 
 
} 
 

 
#sentence_two, #div_two { 
 
    background-color: lightblue 
 
} 
 

 
[toggle] { cursor: pointer } 
 

 
[toggle], .toggleable { 
 
    border-radius: 5px; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    border-color: darkgray; 
 
    padding: 1em; 
 
    text-align: center; 
 
    font-weight: bold; 
 
}

<p id="sentence_one" toggle="div_one">Solution 1 ~ click to show div 1</p> 
 
<p id="sentence_two" toggle="div_two">Solution 2 ~ click to show div 2</p> 
 

 
<hr> 
 

 
<div id="div_one" class="toggleable">div 1</div> 
 
<div id="div_two" class="toggleable hidden">div 2</div>