哪种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 div都能通过拥有：

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

一旦用户选择其中一个超链接，应用到这些链接中，除了包含带有目标div的span的id之外，JS应该将actual-outcome类应用到其中，因此它和它单独显示：

div.actual-outcome {display: block;}

当用户按下possible-outcome div中指向某个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选择器.possible-outcome (所有div元素都有)来隐藏所有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交互式调试检查表是我们解决这个问题的解决方案的实现。

它就像狮身人面像文档中的一个选择你自己的冒险故事，可以帮助用户识别部署失败的原因。

它是在Ibrahim Mahrir的答复的基础上开发的。

我们的一位实际的JS专家(即不是我)根据易卜拉欣对最终版本的回答使用了我的概念证明。

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

联署材料：

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