Javascript 使用jquery显示/隐藏文本

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

我已经研究过类似的问题，但似乎无法让它发挥作用。我想这是因为我刚刚开始尝试使用jquery，并没有真正理解这个问题。所有hep将不胜感激！谢谢

html:

---

第一个按钮应与第一段相关，依此类推。Iv尝试使用“this”功能来关联特定按钮，但一定是使用错误，因为它不起作用。

有几种不同的方法来实现此目的。最简单的方法是在按钮上有一个不同的ID，对应于每个段落

JS

HTML

HTML

---

首先，您必须识别不同的按钮，如果您使用button类，您将始终引用所有3个按钮

此外，您不需要将div元素放在p元素中

所以你可以这样做：

<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>

小提琴：

---

正如我在评论中提到的：您需要一个单击处理程序，并向按钮添加一个数据属性，您可以使用它来选择正确的文本元素

例子：

---

这就是你要找的吗

JS:

HTML:

---

您需要在标记中解决一些问题，然后您可以通过这样做来实现这一点：

<!-- 
Notice your divs with class equal button have missing closing tags.
I've added them.
Also, I've added a data-rel attribute to each one of them to refer
to your related item to show/hide.
-->
<div class="button" data-rel="1">
    <div class="button float_l"><a href="#">More..</a></div>
</div>
<div class="button" data-rel="2">
    <div class="button float_l"><a href="#">More..</a></div>
</div>
<div class="button" data-rel="3">
    <div class="button float_l"><a href="#">More..</a></div>
</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>

您还可以通过依赖元素索引来实现预期结果：

<div class="button">
    <div class="button float_l"><a href="#">More..</a></div>
</div>
<div class="button">
    <div class="button float_l"><a href="#">More..</a></div>
</div>
<div class="button">
    <div class="button float_l"><a href="#">More..</a></div>
</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>

---

您已将单击事件连接到所有3个按钮上两次！您需要一个点击处理程序，并向按钮添加一个数据属性，您可以使用它来选择正确的文本元素！谢谢你的帮助！不过，还有一件事，当我按下按钮隐藏或显示页面向上滚动到最顶端时，有没有办法阻止这种情况发生？是的，这是因为href=，您可以将其替换为href=，并且它不会滚动到任何地方。试试看！不，删除标签后，当我点击按钮时，页面会跳转一秒钟，然后显示文本？好吧，你可以删除整个标签：更多..你为什么一遍又一遍地重复相同的代码？如果有数百个按钮/段落呢？是的，我意识到我的主要问题是没有单独命名按钮。谢谢你的帮助

<p id="text1">Foo</p>
<p id="text2">Bar</p>
<input type="button" id="btn1" value="Toggle P1" />
<input type="button" id="btn2" value="Toggle P2" />

$('.button').click(function(){
    var id = $(this).attr('data-pid');
    $('#text'+id).toggle();
});

<p id="text1">Foo</p>
<p id="text2">Bar</p>
<input type="button" class="button" data-pid="1" value="Toggle P1" />
<input type="button" class="button" data-pid="2" value="Toggle P2" />

<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>

$(document).ready(function () {

    $("p").hide();

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

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

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

<div class="button"><div class="button float_l" t="1"><a href="#">More..</a></div>
 <div class="button"><div class="button float_l" t="2"><a href="#">More..</a></div>
 <div class="button"><div class="button float_l" t="3"><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>

$(document).ready(function () {
 $(".button").click(function(){
     $("#text" + $(this).attr('t')).toggle();
 }); 
});

$(document).ready(function () {
    $('.para').hide();
    $(".button").click(function () {
        // Hide all paragraphs
        $('.para').hide();
        // Show the selected paragraph
        $('#' + $(this).data('id')).show();
    });
});

$("#text1").hide();
$("#text2").hide();
$("#text3").hide();

$("#button1").click(function(){
    $("#text1").toggle();
});

$("#button2").click(function(){
    $("#text2").toggle();
});

$("#button3").click(function(){
    $("#text3").toggle();
});

<div id="button1"><div class="button float_l"><a href="#">More..</a></div></div>
<div id="button2"><div class="button float_l"><a href="#">More..</a></div></div>
<div id="button3"><div class="button float_l"><a href="#">More..</a></div></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>

<!-- 
Notice your divs with class equal button have missing closing tags.
I've added them.
Also, I've added a data-rel attribute to each one of them to refer
to your related item to show/hide.
-->
<div class="button" data-rel="1">
    <div class="button float_l"><a href="#">More..</a></div>
</div>
<div class="button" data-rel="2">
    <div class="button float_l"><a href="#">More..</a></div>
</div>
<div class="button" data-rel="3">
    <div class="button float_l"><a href="#">More..</a></div>
</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>

$(function () {
    // Hide all elements which id starts with text.
    $("[id^=text]").hide();

    $(".button").click(function () {
        // Look for the element with id equals text + 
        // the clicked element data-rel value.
        $("#text" + $(this).data("rel")).toggle();
    });
});

<div class="button">
    <div class="button float_l"><a href="#">More..</a></div>
</div>
<div class="button">
    <div class="button float_l"><a href="#">More..</a></div>
</div>
<div class="button">
    <div class="button float_l"><a href="#">More..</a></div>
</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>

$(function () {
    // Hide all elements which id starts with text.
    $("[id^=text]").hide();

    // Just for the elements with class equals
    // button but not with class float_l.
    $(".button:not(.float_l)").click(function (e) {
        e.stopPropagation();

        // Look for the element which index matches
        // the clicked one.
        $("[id^=text]").eq($(this).index()).toggle();
    });
});