Javascript показать и скрыть функцию

Question

Я пытаюсь сделать функцию показа / скрытия с некоторыми контейнерами и текстом. Когда я нажимаю на определенный контейнер, я хочу скрыть абзац. В данный момент я пытаюсь решить, когда я нажимаю "left" контейнер, абзац "barbertext" исчезнуть.

<p class="hairtext" style="color:red">We are Thairapy, an independent hair <br> and beauty Salon located in the heart<br> of Exeter. At Thairapy, we care about<br> our clients and our main aim is to go<br> that extra mile and look after every <br> one of our happy customers.</p>

    <p class="beautytext" style="color:red">Our beautician, Shail Dutt has over<br> 10 years of experience within the beauty<br> industry. Shail is a very dedicated and<br> passionate person, she strives to make<br> her clients feel loved and special. </p>

    <p class="barbertext" style="color:red">A decent Mens haircut needn't cost the<br>Earth. We offer top quality Men's haircuts<br> from £7. </p>

    <div class="container" id= "left" >
        <h1 style="color:white"><a>HAIR</a></h1>
    </div>

    <div class= "container" id= "center">
        <h1 style="color:white"><a>BEAUTY<a/></h1>
    </div>

    <div class="container" id= "right">
        <h1 style="color:white"><a>BARBERS</a></h1>
    </div>
</div>

Javascript, с которым я работаю, таков:

<script>
$(document).ready(function(){
  $("#hairtext").click(function(){
    $("barbertext").hide();
  });
  $("#hairtext").click(function(){
    $("barbertext").show();
  });
});
</script>

Если бы кто-нибудь мог помочь, я был бы очень признателен.

Answer 1

Вы сделали неправильно с вашим селектором:

$(".barbertext")

Я не уверен, что вы хотите, но кажется, что вы хотите, когда пользователь нажимает на контейнер, отображается / скрывается связанный div. Я создал скрипку для этого: http://jsfiddle.net/BenoitNgo/0yL02nop/6/

Answer 2

Вы связываете оба обработчика с одним и тем же элементом, поэтому скрываете и отображаете каждый раз, когда нажимаете.

Пытаться toggle() так что он чередуется между скрытием / показом

$(document).ready(function(){
  $(".hairtext").click(function(){
    $(".barbertext").toggle();
  });
});

(нужно добавить . к селектору barbertext и . за прическу. # используется для идентификаторов)

Answer 3

Я сделал следующую скрипку, которая должна делать то, что вам нужно http://jsfiddle.net/Lyd9hgh2/

$(document).ready(function(){
    var hidden= false;
  $("#left").click(function(){
      if(hidden){
          $(".barbertext").show();
          hidden = false;
      }else
      {
          $(".barbertext").hide();
          hidden = true;
      }

  });
});

Answer 4

Исправил существующий код: (в соответствии с вашими потребностями - когда я нажимаю "левый" контейнер, абзац "barbertext" исчезает)

<script>
    $(document).ready(function(){
      $("#left").click(function(){
        $(".barbertext").hide();
      });
      $("#left").click(function(){
        $(".barbertext").show();
      });
    });
    </script>

Improvments:

1. Вы можете использовать идентификаторы для контейнеров и абзацы как для производительности
2. Вы можете использовать функцию переключения jquery, если вы хотите показать / скрыть поведение при щелчке контейнера