Javascript显示和隐藏功能答案

【问题标题】：Javascript show and hide functionJavascript显示和隐藏功能
【发布时间】：2015-01-25 18:26:02
【问题描述】：

我正在尝试使用一些容器和文本来执行显示/隐藏功能。当我单击某个容器时，我希望隐藏一段。目前我正在尝试解决当我单击"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>

如果有人能提供帮助，我将不胜感激。

【问题讨论】：

您缺少 .对于 barbertext 类：$(".barbertext").hide();

标签： javascript jquery html show-hide

【解决方案1】：

您将两个处理程序绑定到同一个元素，因此每次单击时都会隐藏和显示。

试试toggle()，让它在隐藏/显示之间交替

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

（需要将.添加到barbertext选择器，.用于hairtext。#用于ids）

【讨论】：

【解决方案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;
      }

  });
});

【讨论】：

太棒了。干杯人:)
如果它有效，您可以通过单击箭头下方的勾来接受它

【解决方案3】：

你的选择器做错了：

$(".barbertext")

我不确定您想要什么，但是当用户单击容器时，它似乎是您想要的，显示/隐藏了关联的 div。我为此创建了一个小提琴： http://jsfiddle.net/BenoitNgo/0yL02nop/6/

【讨论】：

【解决方案4】：

更正了现有代码：（根据您的需要 - 当我单击“左”容器时，段落“barbertext”消失）

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

改进：

您可以将 Id 用于容器和段落以提高性能
如果您想在容器单击时显示/隐藏行为，可以使用 jquery 切换功能

【讨论】：