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

您將兩個處理程序綁定到同一元素，因此每次單擊時都隱藏並顯示。

嘗試toggle()以便在隱藏/顯示之間toggle()

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

（ 需要將.添加到理發文本選擇器中，並將.添加到發文本中。 #用於IDs ）

Answer 2

我做了以下小提琴，該小提琴應該可以滿足您的需求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 3

更正了現有代碼：（根據您的需要-當我單擊“左”容器時，“ barbertext”段落消失了）

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

改進之處：

1. 您可以將Ids用於容器，而將段落用於性能
2. 如果要在容器單擊上顯示/隱藏行為，可以使用jquery切換功能

Answer 4

您選擇器做錯了：

$(".barbertext")

我不確定您想要什么，但是當用戶單擊容器時，似乎可以根據需要顯示/隱藏一個相關的div。 我為此創建了一個小提琴： http : //jsfiddle.net/BenoitNgo/0yL02nop/6/