Question

我尝试编写一个脚本，显示两个不同的文本（div s），具体取决于点击两个<p>元素中的哪一个。 <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>

{{1}}

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

以下是一些解决方案，点击＆＃34;运行代码段＆＃34;在工作演示的底部

通过声明每个 p 显示哪个 div 同时隐藏所有其他

来工作

这种方法的优点在于，如果您在<p>, <div>, etc...上使用它来显示/隐藏任何内容并不重要，它适用于任何数量的＆＃34;按钮＆＃34;和＆＃34; showables＆＃34;

另外，忽略化妆品CSS（不是解决方案的一部分），它的代码比原始问题和接受的答案都要少，并避免重复：D

＆＃13;

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')
  })
}

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

只显示一个解决方案，'停用'另一个解决方案

2 个答案: