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

Question

Я пытаюсь сделать функцию show/hide с некоторыми контейнерами и текстом. Когда я нажимаю на определенный контейнер, я хочу скрыть абзац. На данный момент я пытаюсь работать, когда я нажимаю контейнер "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> 

The Javascript, что я работаю с такой:

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

Если кто-то может помочь мне бы очень признателен.

Answer 1

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

$(".barbertext") 

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

Answer 2

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

Попробуйте toggle() так, чтобы она чередует скрыть/показать

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

(, необходимые для добавления . к селектору barbertext и . для hairtext. # используется для ид)

Answer 3

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

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

Improvments:

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

Answer 4

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

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

    }); 
});