1

Подскажите, как лучше в JavaScript идентифицировать действие 'Скрыть/Показать' для в след конструкции:

   <div id="one">
      <span class="clickClass">Скрыть</span>
   </div>
   <div id="two">
      <span class="clickClass">Показать</span>
   </div>

Классы у <span> одинаковые. При клике на span нужно получить значение, по которому потом будет производиться какое-то действие.

Мне нужно сделать 2 кнопки. При нажатии на Скрыть, скрывается текущий div id='one', показывается второй id='two'. Во втором div есть кнопка показать. При нажатии скрывается текущий div id='two', показывается id='one'

4
  • что значит значение, по которому потом будет производиться какое-то действие.?
    – Grundy
    25 авг 2016 в 14:19
  • @Grundy, Значение html внутри span.
    – Pavel
    25 авг 2016 в 14:31
  • @Grundy, Мне нужно сделать 2 кнопки. При нажатии на Скрыть, скрывается текущий div id='one', показывается второй id='two'. Во втором div есть кнопка показать. При нажатии скрывается текущий div id='two', показывается id='one'
    – Pavel
    25 авг 2016 в 14:34
  • вот всё, что вы только что написали, добавьте в свой вопрос посредством его редактирования. P.S. то, что вам надо получить, называется не значением, а содержимым
    – lexxl
    25 авг 2016 в 14:36

3 ответа 3

2

   x=document.getElementsByClassName('clickClass');
for(var i=0;i<x.length;i++)
 {

x[i].addEventListener("click", function(){


  if ( this.innerHTML == 'Скрыть' ) {
 
  document.getElementById("one").style.display="none";
  document.getElementById("two").style.display="inline";
  } 
  else if (this.innerHTML == 'Показать' ) {
  document.getElementById("one").style.display="inline";
  document.getElementById("two").style.display="none";
   
                                          
}});}
<div id="one">
  <span class="clickClass">Скрыть</span>
   </div>
   <div id="two">
  <span class="clickClass">Показать</span>
   </div>

1

var x = document.getElementsByClassName("clickClass");

for (var i = 0; i < x.length; i++) {
  x[i].addEventListener('click', function(e){document.getElementById('x').innerHTML  = this.innerHTML});
}
<div id="one">
      <span class="clickClass">Скрыть</span>
   </div>
   <div id="two">
      <span class="clickClass">Показать</span>
   </div>
	 <p id="x"></p>

0
$(function(){

  $('.clickClass').click(function(){
    if ( $(this).text() == 'Скрыть' ) {
      // ваши действия
    } else if ( $(this).text() == 'Показать' ) {
      // ваши действия
    }
  });

});
1
  • Спасибо за ответ. Но нужно на классическом JavaScript без использования библиотеки jQuery,
    – Pavel
    25 авг 2016 в 14:39

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.