Question

我寻求帮助。我想为包含多个问题和答案的指南创建疑难解答，以指导工作人员遵循正确的流程。我创建了一个示例，但是yes框对我不起作用...我该怎么办？问题是，如果我单击“是”或“否”，它会返回相同的答案，那么我必须确保通过单击“是”得到一个答案，然后单击“否”，我会有另一个带有其他框的答案

谢谢！

<style>
 ul, #myUL {
 list-style-type: none;
 }

  #myUL {
  margin: 0;
   padding: 0;
   } 

  .box {
 cursor: pointer;
 -webkit-user-select: none; /* Safari 3.1+ */
 -moz-user-select: none; /* Firefox 2+ */
 -ms-user-select: none; /* IE 10+ */
 user-select: none;
 }

.box::before {
 content: "\2610";
 color: black;
 display: inline-block;
 margin-right: 6px;
 }

.check-box::before {
 content: "\2611"; 
 color: dodgerblue;
 }

.nested {
 display: none;
 }

 .active {
  display: block;
  }
  </style>

 <ul id="myUL">
 <li>  beverage?</li>
 <li><span class="box">yes</span>
 <li><span class="box">no</span>
 <ul class="nested">
 <li>eat?</li>
 <li><span class="box">yes</span>
 <li><span class="box">no</span>
 <ul class="nested">
 <li>ecc</li>

<script>
var toggler = document.getElementsByClassName("box");
var i;

for (i = 0; i < toggler.length; i++) {
 toggler[i].addEventListener("click", function() {                                      this.parentElement.querySelector(".nested").classList.toggle("active");
this.classList.toggle("check-box");
  });
 }
  </script>

Answer 1

正确关闭li & ul tag

<ul id="myUL">
    <li>beverage?</li>
    <li><span class="box">yes</span>
        <span class="box">no</span>
        <ul class="nested">
            <li>eat?</li>
            <li><span class="box">yes</span>
                <span class="box">no</span>
                <ul class="nested">
                    <li>ecc</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

https://jsfiddle.net/lalji1051/erfmjd5v/4/

Answer 2

我不认为<ul>元素应以这种方式使用。
这是要考虑的替代用户界面：

// Declares questions array and results object for reference
let questions = [
  { id: "q1", terminal: false, yes: "q2",       no: "q5"       },
  { id: "q2", terminal: false, yes: "q3",       no: "q4"       },
  { id: "q3", terminal: true,  yes: "result3y", no: "result3n" },
  { id: "q4", terminal: true,  yes: "result4y", no: "result4n" },
  { id: "q5", terminal: false, yes: "q6",       no: "q7"       },
  { id: "q6", terminal: true,  yes: "result6y", no: "result6n" },
  { id: "q7", terminal: true,  yes: "result7y", no: "result7n" }
];

let results = {
  result3y: "blue",
  result3n: "green",
  result4y: "red",
  result4n: "yellow",
  result6y: "black",
  result6n: "white",
  result7y: "brown",
  result7n: "grey"
};

// Runs the processResult function when the user clicks on the page 
document.addEventListener("click", processResponse);

function processResponse(event) { // `event` is the click that triggered the function
  // Makes sure a box was clicked before proceeding
  if(event.target.classList.contains("box")){
    // Identifies HTML elements (and the 'response' data attribute)
    const
      box = event.target,
      question = box.parentElement,
      response = box.dataset.response,
      boxAndSibling = question.querySelectorAll(".box"),
      sibling = response == "no" ? boxAndSibling[0] : boxAndSibling[1],
      resultDisplay = document.getElementById("result");

    // Makes sure the other box is not already checked before proceeding        
    if(!sibling.classList.contains("check-box")){
      box.classList.add("check-box");
      
      // Finds the question in the array
      for(let quest of questions){
        if(quest.id == question.id){
          
         // Shows the result for terminal questions
         if(quest.terminal){
            result = quest[response];
            resultDisplay.innerHTML = `Secret color: ${results[result]}`;
          }
          // Or otherwise shows the next question
          else{
            const next = document.getElementById(quest[response]);
            next.classList.add("active");
          }
        }
      }
    }
  }
}

ul { list-style-type: none; }
#myUL { margin: 0; padding: 0; }

.box {
  cursor: pointer; -webkit-user-select: none; -moz-user-select: none; 
  -ms-user-select: none;  user-select: none;
}
.box::before { content: "\2610"; color: black; display: inline-block; margin-right: 6px; }

.check-box::before { content: "\2611"; color: dodgerblue; }

.nested { display: none; }
.active { display: block; }

#result{ font-size: 2em; }

<div id="q1">
  <span>Animal?</span><br />
  <span class="box" data-response="yes">Yes</span><br />
  <span class="box" data-response="no">No</span><br />
</div>
<div id="q2" class="nested">
  <span>Mammal?</span><br />
  <span class="box" data-response="yes">Yes</span><br />
  <span class="box" data-response="no">No</span><br />
</div>
<div id="q3" class="nested">
  <span>Platypus?</span><br />
  <span class="box" data-response="yes">Yes</span><br />
  <span class="box" data-response="no">No</span><br />
</div>
<div id="q4" class="nested">
  <span>Fish?</span><br />
  <span class="box" data-response="yes">Yes</span><br />
  <span class="box" data-response="no">No</span><br />
</div>
<div id="q5" class="nested">
  <span>Vegetable?</span><br />
  <span class="box" data-response="yes">Yes</span><br />
  <span class="box" data-response="no">No</span><br />
</div>
<div id="q6" class="nested">
  <span>Tuber?</span><br />
  <span class="box" data-response="yes">Yes</span><br />
  <span class="box" data-response="no">No</span><br />
</div>
<div id="q7" class="nested">
  <span>Fungus?</span><br />
  <span class="box" data-response="yes">Yes</span><br />
  <span class="box" data-response="no">No</span><br />
</div>

<p id="result"></p>

如何制作一个用于层叠多个问题和答案的盒子

2 个答案: