Вопрос:

Onclick показать / скрыть - Javascript

javascript jquery html css

1052 просмотра

3 ответа

465 Репутация автора

Я работаю очень простая программа, которая показывает решение проблемы, когда пользователь нажимает на ссылку решения. Я пытаюсь сделать это без использования 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>

Автор: Pedro Источник Размещён: 08.11.2017 10:36

Ответы (3)


0 плюса

0 Репутация автора

Почему вы сейчас пытаетесь получить тот nextSiblingсамый элемент, который хотите отобразить (the textNode)? Используя event Object target( p.solutionLink), получите доступ к смежному elementNode( div.solution). Согласно вашему коду следующее решение должно работать для вас.

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

PS почему ваш CSS селектор множественного числа .solutions?

Автор: user8701049 Размещён: 08.11.2017 10:46

1 плюс

1637 Репутация автора

Ваша первая проблема - селектор CSS: класс solutionsдействительно называется solution.

Далее я бы порекомендовал использовать атрибуты данных . Таким образом, вы можете изменить свою DOM-структуру и вам не нужно менять js. В качестве альтернативы я бы, по крайней мере, завернул каждое решение в свой собственный контейнер.

Ниже (на мой взгляд) хорошая реализация, но я все же хочу обрисовать некоторые проблемы с вашим js:

  • getElementsByClassName('.solution')̀ should begetElementsByClassName ('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>

Автор: SourceOverflow Размещён: 08.11.2017 10:58

1 плюс

7595 Репутация автора

Решение

var solutionLinks = document.querySelectorAll(".solutionLink");

for (var i = 0; i < solutionLinks.length; i++) {
  solutionLinks[i].addEventListener("click", function() {
    this.nextElementSibling.classList.toggle("hidden");
  });
}
.hidden {
  display:none;
}
<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>

Автор: Ron Royston Размещён: 08.11.2017 11:20
Вопросы из категории :
32x32