时间戳

首页 > 解决方案 > 根据按钮答案显示/隐藏内容

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

问题描述

我正在尝试根据按钮选择使我的代码显示/隐藏代码块。我是 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'
}

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

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

标签： javascripttoggle

解决方案

因此，我想解决一些问题，如果我引导您走错路，请告诉我，我会更新我的答案。

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

2）您的函数声明var displayOption = function toggleOption()可能有效，但不清楚如何阅读（至少对我而言）。你的函数名称是什么？切换选项（）显示选项（）？

2b）此外，没有什么可以调用您的函数来实际启动。您将所有代码都包含在 displayOption() 中，但是没有任何东西可以调用它来触发您的嵌套代码。

3).click()在传统的 JavaScript 中，仅用作调用点击操作的方法——它不是真/假测试。如果您这样做option1.click()，则会像单击鼠标一样以编程方式单击您的 option1 元素）

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

4）据我所知，没有.getElementByClass()- 但是，.getElementsByClassName()重要的是要注意它会返回一个节点列表 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 ，这只会返回第一个匹配的结果。

var option1yes = document.getElementById('option1yes')
var option1no  = document.getElementById('option1no')

option1yes.addEventListener('click', function(){
    option1no.style.display = 'none';
});
<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>

更新

好的，要隐藏和显示网页的各个部分，有几个第一步可以从前面的几点开始:)

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

1b) 在这个例子中，我把后面的问题放在divs 里面，并给它们一个唯一的 ID，这样我们就可以在 JavaScript 中更容易地定位它们。它们也有相同的 CSS 类.hidden，在第 2 点中讨论过 :)

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

2b）在这个例子中，我创建了一个 CSS 类.hidden，通过将它添加到一个元素来命名，它的 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 部分。

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';
});
.hidden{ display: none; }
<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>

推荐阅读