使用jquery显示/隐藏文本 [英] Show/Hide text using jquery

问题描述

基本上我有6个按钮和6个段落（每个按钮与特定的段落有关）。我想在单击某个按钮时显示一段文本，然后在再次单击该按钮时隐藏该段落。

我已经查看了类似的问题，但无法查看似乎得到它的工作。我认为它是因为我只开始尝试使用jquery而不真正了解问题。所有hep将不胜感激！谢谢！

html：

 < div class =button >< div class =button float_l>< a href =＃>更多..< / a>< / div> 
< div class =button>< div class =button float_l>< a href =＃>更多..< / a>< / div> 
< div class =button>< div class =button float_l>< a href =＃>更多..< / a>< / div> 
 
 
< p>< div id =text1>段落1< / div>< / p> 
 
< p>< div id =text2>段落2< / div>< / p> 
 
< p>< div id =text3>第3段< / div>< / p> 
  

javascript：

 < code $（document）.ready（function（）{
 
 $（＃text1）。hide（）; 
 $（。button）。click function（）{
 $（＃text1）。toggle（）; 
 $ b $（＃text2）。hide（）; 
 $（。button ）.click（function（）{
 $（＃text1）。toggle（）; 
 
}）; 
  

第一个按钮应该与第一个段落有关，等等。Iv尝试使用'this'函数来关联一个特定的按钮，但必须使用它不正确，因为它的剂量首先，你必须确定你的不同按钮，如果你使用按钮类，你会总是指全部3个按钮。

您也不需要在ap元素中放置div元素。

所以你可以这样做：

 < div id =btn1class =button> < a href =＃>更多..< / a>< / div& gt; 
< div id =btn2class =button>< a href =＃>更多..< / a>< / div> 
< div id =btn3class =button>< a href =＃>更多..< / a>< / div> 
 
 
< p id =p1>段落1< / p> 
< p id =p2>段落2< / p> 
< p id =p3>段落3< / p> 
  

然后，javascript：

  $（document）.ready（function（）{
 
 $（p）。hide（）; 
 
 $（＃btn1 ）.click（function（）{
 $（＃p1）。toggle（）; 
}）; 
 
 $（＃btn2）。click函数（）{
 $（＃p2）。toggle（）; 
}）; 
 
 $（＃btn2）。 b $ b $（＃p2）。toggle（）; 
}）; 
}）; 
  

Basically I have 6 buttons and 6 paragraphs (each one button relating to a specific paragraph). I want to show a paragraph of text when a certain button is clicked, and then hide that paragraph when the button is clicked again.

I have looked through similar questions but cannot seem to get it to work. I think its because I have only started trying to use jquery and dont really understand the problem. All hep would be appreciated! thanks!

html:

     <div class="button"><div class="button float_l"><a href="#">More..</a></div>
     <div class="button"><div class="button float_l"><a href="#">More..</a></div>
     <div class="button"><div class="button float_l"><a href="#">More..</a></div>   


        <p><div id="text1">Paragraph 1</div></p>

        <p><div id="text2">Paragraph 2</div></p>

        <p><div id="text3">Paragraph 3</div></p>

javascript:

     $(document).ready(function () {

     $("#text1").hide();
     $(".button").click(function(){
     $("#text1").toggle();

     $("#text2").hide();
     $(".button").click(function(){
     $("#text1").toggle();

     });

the first button should relate to the first paragraph and so on. Iv tried using the 'this' function to relate to a specific button but must be using it incorrectly because it dosent work.

解决方案

First of all, you have to identify your different buttons, if you use the "button" class, you will always refer to the all 3 buttons.

Also you don't need to put a div element inside a p element.

So you can do something like this:

<div id="btn1" class="button"><a href="#">More..</a></div>
<div id="btn2" class="button"><a href="#">More..</a></div>
<div id="btn3" class="button"><a href="#">More..</a></div>   


<p id="p1">Paragraph 1</p>
<p id="p2">Paragraph 2</p>
<p id="p3">Paragraph 3</p>

Then, javascript:

$(document).ready(function () {

    $("p").hide();

    $("#btn1").click(function(){
         $("#p1").toggle();
    });

    $("#btn2").click(function(){
         $("#p2").toggle();
    });

    $("#btn2").click(function(){
         $("#p2").toggle();
    });
});

这篇关于使用jquery显示/隐藏文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！