Question

我正在尝试根据按钮选择使代码显示/隐藏代码块。我是JavaScript的初学者。我几乎不知道如何使它工作，这是我第一次尝试写它并且正如预期的那样，我失败了。但希望你能弄清楚我在做什么。

HTML：

<p>Do you want to go for a swim?</p>
<button onclick="#option1-yes" class="option1yes">Yes</button> <button onclick="#option1-no" class="option1no">No</button>

<p id="option1-yes">Let's go to the water park! There's a water park around the corner from you.</p><button onclick="#option2-yes">Sounds Fun</button> <button onclick="#option2-no">I want to do something else</button>

<p id="option1-no">Let's go to the mall! There's a mall 15 miles away from you.</p>
<button onclick="#option3-yes">Sounds Fun</button> <button onclick="#option3-no">I want to do something else</button>

我对JavaScript的悲惨尝试：

var displayOption = function toggleOption() {
  var option1 = document.getElementByClass('option1yes')

  var option2 = document.getElementByClass('option1no')

  if (.click('.option1yes')) {
    option2.style.display = 'none'
  }
  else option1.style.display = 'block'
}

编辑：我正在尝试显示第一个问题，然后当用户回答第一个问题时，根据之前的答案显示第二个或第三个问题。< / p>

任何和所有的帮助将不胜感激!!!!!

Answer 1

所以，有一点我想解决，如果我引导你走错路，请告诉我，我会更新我的答案。

1）在HTML中，按钮的onclick属性传统上用于调用某些JavaScript函数... onclick="test()"会在JS中调用function test(){...}。使用hash-ID在这里并没有真正完成任何事情（在锚标签中，href属性+ hash-ID允许浏览器跳转到页面<a href="#content-section">中的某个部分）

2）你的功能声明var displayOption = function toggleOption()可能有效，但它不清楚如何阅读（至少对我来说）。你的功能名称是什么？ toggleOption（）displayOption（）？

2b）此外，没有任何东西可以调用你的功能来实际开除。您已将所有代码包装在displayOption（）中，但没有任何调用来触发嵌套代码。

3）传统JavaScript中的.click()仅用作调用点击操作的方法 - 它不是真/假测试。如果您option1.click()以编程方式单击您的option1元素（如鼠标单击）

3b）要收听点击事件，我最喜欢的方法是element.addEventListener('click', function(){ .. } ) - 这会将您的JavaScript设置为在/单击特定元素按钮时监听，然后相应地执行代码https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

4）据我所知，没有.getElementByClass() - 但是有一个.getElementsByClassName()值得注意的是它会返回一个节点 list https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByClassName

4b）由于您要定位特定元素，因此您可以为其分配ID，然后使用.getElementById()将它们连接到JavaScript https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById 这只会返回第一个匹配的结果。

＆＃13;

var option1yes = document.getElementById('option1yes')
var option1no  = document.getElementById('option1no')

option1yes.addEventListener('click', function(){
    option1no.style.display = 'none';
});

＆＃13;

<p>Do you want to go for a swim?</p>
<button id="option1yes">Yes</button> 
<button id="option1no">No</button>

<p>Let's go to the water park! There's a water park around the corner from you.</p>
<button id="option2-yes">Sounds Fun</button> 
<button id="option2-no">I want to do something else</button>

<p>Let's go to the mall! There's a mall 15 miles away from you.</p>
<button id="option3-yes">Sounds Fun</button> 
<button id="option3-no">I want to do something else</button>

＆＃13;

更新

好的，要隐藏和显示网页的各个部分，可以从以前的点开始构建几个第一步：）

1）您需要将要隐藏/显示的部分隔离在自己的容器中 - 通常开发人员使用div来实现此目的。

1b）在这个例子中，我将后续问题放在div中，并为它们提供了一个唯一的ID，以便我们可以在JavaScript中更容易地将它们作为目标。它们也具有相同的CSS类.hidden，这将在第2点中讨论：）

2）你的部分应该开始隐藏，这可以通过一些CSS来完成

2b）在这个例子中，我创建了一个名为.hidden的CSS类，通过将其添加到元素中，它的CSS值将被设置为display: hidden;（通过JavaScript取消它，元素将恢复为默认显示值）

2c）您可以使用element.className="" https://developer.mozilla.org/en-US/docs/Web/API/Element/className或element.classList https://developer.mozilla.org/en-US/docs/Web/API/Element/classList - 我喜欢.className，但这正是我所做的事情。我习惯了。

3）为了确保用户可以更改选择，JavaScript会从其预定目标中删除.hidden类，但会将其添加回需要隐藏的其他div部分。 / p>

＆＃13;

var btnYes = document.getElementById('option1yes');
var btnNo  = document.getElementById('option1no');
var optYes = document.getElementById('option1-yes');
var optNo  = document.getElementById('option1-no');

btnYes.addEventListener('click', function(){
  optYes.className = ''; 
  optNo.className = 'hidden';
});

btnNo.addEventListener('click', function(){
  optNo.className = '';
  optYes.className = 'hidden';
});

＆＃13;

.hidden{ display: none; }

＆＃13;

<p>Do you want to go for a swim?</p>
<button id="option1yes">Yes</button> 
<button id="option1no">No</button>

<div id="option1-yes" class="hidden">
  <p>Let's go to the water park! There's a water park around the corner from you.</p>
  <button id="option2yes">Sounds Fun</button> 
  <button id="option2no">I want to do something else</button>
</div>

<div id="option1-no" class="hidden">
  <p>Let's go to the mall! There's a mall 15 miles away from you.</p>
  <button id="option3yes">Sounds Fun</button> 
  <button id="option3no">I want to do something else</button>
</div>

＆＃13;

Answer 2

当你展示一个元素时你应该隐藏另一个元素，所以你可以在每个元素中插入一个id，在开头隐藏元素。因此，当你有一个id时，你可以创建一个onclick函数并做你想做的任何事情，例如：

HTML

<p>Do you want to go for a swim?</p>
<button id="option1yes">Yes</button>
<button id="option1no">No</button>
<p id="option1-yes">Let's go to the water park! There's a water park around the corner from you.</p>
<p id="option1-no">Let's go to the mall! There's a mall 15 miles away from you.</p>

Javascript

var y = document.getElementById("option1-yes");
var n = document.getElementById("option1-no");
y.style.display = "none";
n.style.display = "none";

document.getElementById("option1yes").onclick = function () {
    y.style.display = "block";
    n.style.display = "none";
};

document.getElementById("option1no").onclick = function () {
    y.style.display = "none";
  n.style.display = "block";
};

Demo

根据按钮答案显示/隐藏内容

2 个答案:

更新