哪种JS技术：选择目标元素的父级？

Question

我不确定问题中的条款是否正确;但我有一些HTML（不幸的是，我坚持其结构）：

<div>
  <ul>
    <li><a href="#turn-left">Turn left</a></li>
    <li><a href="#turn-right">Turn right</a></li>
  </ul>
</div>

<div class="possible-outcome">
  <span id="turn-left"></span>
  <p>You step into a puddle.</p>
</div>

<div class="possible-outcome">
  <span id="turn-right"></span>
  <p>You fall into a ditch.</p>
</div>

我想要的是所有possible-outcome divs通过以下方式隐藏：

div.non-actual-outcome {display: none;}

应用于它们，一旦用户选择其中一个超链接，除了div包含span与目标id，它应该由JS应用它的actual-outcome类，所以它和它一个人显示：

div.actual-outcome {display: block;}

当用户点击span possible-outcome中的div的其他链接时，那个div将成为唯一可见的（直到用户点击不属于其中一个跨度的链接）。

以下是一些示例代码：

div.non-actual-outcome {
  display: none;
}

div.actual-outcome {
  display: block;
}

<div>
  <ul>
    <li><a href="#turn-left">Turn left</a></li>
    <li><a href="#turn-right">Turn right</a></li>
  </ul>
</div>

<div class="possible-outcome">
  <span id="turn-left"></span>
  <p>You step into a puddle.</p>
</div>

<div class="possible-outcome">
  <span id="turn-right"></span>
  <p>You fall into a ditch.</p>
</div>

实现这一目标的最简单方法是什么（以及提出问题的正确术语）？

Answer 1

首先，为所有a元素添加一个公共类，以便区分它们，例如class="tab"：

<a class="tab" href="#turn-left">Turn left</a>

其次，通过将div属性添加到CSS选择器display:none（所有.possible-outcome元素都具有），默认隐藏所有div元素：

div.possible-outcome {
  display: none;
}

并仅使用actual-outcome隐藏/显示您想要的div。不需要使用两个类，只需要一个。如果div有类actual-outcome那么它将被显示，如果没有那么它将不会（因为它有类possible-outcome）。

第三，当点击.tab元素时，选择其目标span以及span的父级并做一些逻辑：如果span存在且其父级当前未显示（没有类actual-outcome），则隐藏实际显示的div（如果存在）并显示当前span的父母。

注意：如果你想默认显示div，只需添加类actual-outcome：

<div class="possible-outcome actual-outcome">

完整代码：

document.addEventListener("click", function(ev) {
  var target = ev.target;                                               // get the element that has been clicked
  if(target.classList.contains("tab")) {                                // if the clicked element is a .tab element
    var span = document.querySelector(target.getAttribute("href")),     // then select that .tab's span to show
        parent = span.parentElement;                                    // select the parent of that span (perhaps check if the span exists first to not get the "can't access property parentElement of null")
    if(span && !parent.classList.contains("actual-outcome")) {          // if the span exists and its parent is not currently shown (not having the class "actual-outcome")
      var visibleOutcome = document.querySelector(".actual-outcome");   // then select the current shown element (which we know will have the class "actuall-outcome")
      if(visibleOutcome) {                                              // if there is one
        visibleOutcome.classList.remove("actual-outcome");              // hide it by remove the class "actual-outcome" from its classList
      }
      parent.classList.add("actual-outcome");                           // and show the current span's parent by adding that same old class
    }
  }
});

div.possible-outcome {
  display: none;
}

div.actual-outcome {
  display: block;
}

<div>
  <ul>
    <li><a class="tab" href="#turn-left">Turn left</a></li>
    <li><a class="tab" href="#turn-right">Turn right</a></li>
  </ul>
</div>

<div class="possible-outcome">
  <span id="turn-left"></span>
  <p>You step into a puddle.</p>
</div>

<div class="possible-outcome">
  <span id="turn-right"></span>
  <p>You fall into a ditch.</p>
</div>

Answer 2

只是为了完成，Divio Cloud interactive debugging checklist for deployments是我们对这个问题的解决方案的实现。

它就像我们的Sphinx文档中的choose your own adventure story，可以帮助用户确定部署可能失败的原因。

它是在Ibrahim Mahrir's answer的基础上发展起来的：

我们的一位真正的JS专家（即不是我）根据Ibrahim对最终版本的回答使用了我的工作概念验证。

JavaScript和CSS都嵌入在页面本身中。

HTML结构很大程度上取决于Sphinx的输出，因此需要适应元素的排列。

Answer 3

这是我能想到的最佳解决方案。这不会通过添加除提供的类之外的任何其他类来修改结构。

HTML：

<div>
  <ul>
    <li><a href="#turn-left">Turn left</a></li>
    <li><a href="#turn-right">Turn right</a></li>
  </ul>
</div>

<div class="possible-outcome">
  <span id="turn-left"></span>
  <p>You step into a puddle.</p>
</div>

<div class="possible-outcome">
  <span id="turn-right"></span>
  <p>You fall into a ditch.</p>
</div>

CSS：

div.non-actual-outcome {
  display: none;
}

div.actual-outcome {
  display: block;
}

JS：

var outcomeDivs = document.getElementsByClassName('possible-outcome') // selects all divs and returns them as an array
var links = document.querySelectorAll('li') // selects all <li> and returns them as array


// This is turn left li, we will hide turn-right when clicking it.
links[0].addEventListener('click', function(){
  outcomeDivs[1].classList.add('non-actual-outcome'); // hides turn-right
  links[1].style.display = 'none'; // hides other link
});
// This is turn right li, we will hide turn-left when clicking it.
links[1].addEventListener('click', function(){
  outcomeDivs[0].classList.add('non-actual-outcome'); // hides turn-left
  links[0].style.display = 'none'; // hides other link
});

CodePen