javascript – 使用jquery显示/隐藏文本

前端之家收集整理的这篇文章主要介绍了javascript – 使用jquery显示/隐藏文本前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

基本上我有6个按钮和6个段落(每个按钮与特定段落相关).我想在单击某个按钮时显示一段文本,然后在再次单击该按钮时隐藏该段落.

我看过类似的问题,但似乎无法让它发挥作用.我认为它是因为我只是开始尝试使用jquery而不是真正理解这个问题.所有肝脏将不胜感激!谢谢!

HTML:

     

JavaScript的:

     $(document).ready(function () {

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

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

     });

第一个按钮应与第一个段落相关,依此类推.我尝试使用’this’功能与特定按钮相关但必须使用它不正确,因为它有效.

最佳答案
首先,你必须识别不同的按钮,如果使用“按钮”类,你将始终参考所有3个按钮.

此外,您不需要在p元素中放置div元素.

所以你可以这样做:

然后,javascript:

$(document).ready(function () {

    $("p").hide();

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

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

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

猜你在找的HTML相关文章