Question

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

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

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();

     });

第一个按钮应与第一个段落相关，依此类推。我试过使用'this'函数来关联一个特定的按钮，但必须正确使用它，因为它有效。

Answer 1

首先，您必须识别不同的按钮，如果您使用“按钮”类，您将始终参考所有3个按钮。

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

所以你可以这样做：

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

然后，javascript：

$(document).ready(function () {

    $("p").hide();

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

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

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

Answer 2

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

JS：

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

小提琴：

http://jsfiddle.net/pgZWA/

Answer 3

有几种不同的方法可以解决这个问题。最简单的是按钮上有不同的ID，对应于每个段落。

<强> JS

$('#btn1').click(function(){
    $('#text1').toggle();
});
$('#btn2').click(function(){
    $('#text2').toggle();
});

<强> HTML

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

你可以（而不是每个按钮的ID，使用data- *属性。例如

<强> JS

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

<强> HTML

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

Answer 4

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

示例：http://jsfiddle.net/TrueBlueAussie/t93gf/

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

Answer 5

这是你在找什么？

JS ：

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

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

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

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

<强> HTML ：

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

<强> JSFIDDLE

Answer 6

你有一些问题需要在你的标记中整理出来，之后你可以这样做：

<!-- 
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();
    });
});

Demo

jQuery reference

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

<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();
    });
});

Demo

jQuery reference

使用jquery显示/隐藏文本

6 个答案:

示例：http://jsfiddle.net/TrueBlueAussie/t93gf/