Question

我正在使用一个非常简单的程序，在用户单击解决方案链接时显示问题的解决方案。我试图在不使用jQuery的情况下这样做。

所以我做的第一件事是向我的p添加点击。但现在我迷路了，我不知道如何展示解决方案。

有关如何解决此问题的任何想法？

var solutionLink = document.querySelectorAll("p.solutionLink");

function openSolution(){
  document.getElementsByClassName('.solution').nextSibling.style.display = "block";
}

for(var i=0; i< solutionLink.length; i++){
  var solutions = solutionLink[i];
  solutions.addEventListener('click', openSolution, false);
}

.solutions {display:none;}

<p>This problem #1</p>

<p class="solutionLink">Click here to see solution</p>

<div class="solutions">
  This is the solution to problem #1
</div>

<p>This problem #2</p>

<p class="solutionLink">Click here to see solution</p>

<div class="solutions">
  This is the solution to problem #2
</div>

Answer 1

您的第一个问题是您的css选择器：类solutions实际上称为solution。

接下来我建议使用data-attributes。这样您就可以更改DOM结构，而不必更改任何js。或者，我至少会将每个解决方案都包装在自己的容器中。

下面是一个（在我看来）很好的实现，但我仍想概述你的js的一些问题：

getElementsByClassName('.solution')̀ should be getElementsByClassName（'solution'），因为.不是班级名称的一部分
getElementsByClassName返回elementS，就像多个一样。您必须使用[0]

var solutionLink = document.querySelectorAll("p.solutionLink");

function openSolution(){
  document.getElementById(this.dataset.target).style.display = "block";
}

for(var i=0; i< solutionLink.length; i++){
  var solutions = solutionLink[i];
  solutions.addEventListener('click', openSolution, false);
}

.solution {display:none;}

<p>This problem #1</p>

<p class="solutionLink" data-target="sol1">Click here to see solution</p>

<div id="sol1" class="solution">
  This is the solution to problem #1
</div>

<p>This problem #2</p>

<p class="solutionLink" data-target="sol2">Click here to see solution</p>

<div id="sol2" class="solution">
  This is the solution to problem #2
</div>

Answer 2

＆＃13;

var solutionLinks = document.querySelectorAll(".solutionLink");

for (var i = 0; i < solutionLinks.length; i++) {
  solutionLinks[i].addEventListener("click", function() {
    this.nextElementSibling.classList.toggle("hidden");
  });
}

＆＃13;

.hidden {
  display:none;
}

＆＃13;

<p>This problem #1</p>
<p class="solutionLink">Click here to see solution</p>
<div class="hidden">
  This is the solution to problem #1
</div>

<p>This problem #2</p>
<p class="solutionLink">Click here to see solution</p>
<div class="hidden">
  This is the solution to problem #2
</div>

＆＃13;

Answer 3

为什么您目前正在尝试检索要显示的元素的nextSibling（textNode）？使用event Object target（p.solutionLink），访问相邻的elementNode（div.solution）。根据您的代码，以下解决方案应该适合您。

function openSolution(event){
  event.target.nextElementSibling.style.display = "block";
}

P.S为什么你的CSS选择器复数为.solutions？

Onclick显示/隐藏 - Javascript

3 个答案: