Question

我怎么能只影响 + READ BIO DIV我点击并切换下面的P.bio类，而不是页面上的每个实例？我很感激你的帮助。谢谢！

HTML：

<div class="bio-link"></div><p class="bio">This is a bio #1</p>
<div class="bio-link"></div><p class="bio">This is a bio #2</p>

jQuery的：

//Bio Toggle
closebio = "- CLOSE BIO";
showbio = "+ READ BIO"
$(".bio-link").html(showbio);
$(".bio").hide();
$(".bio-link").click(function() {
    if ($(".bio").is(":hidden")) {
        $(".bio:hidden").fadeIn();
        $(".bio-link").html(closebio);
    } else {
        $(".bio").fadeOut();
        $(".bio-link").html(showbio);
    }
});

Answer 1

使用.toggle（）和$（this），如下所示：

    $(function(){
     //Bio Toggle
     closebio = "- CLOSE BIO";
     showbio = "+ READ BIO"
     $(".bio-link").html(showbio);
     $(".bio").hide();
     $(".bio-link").toggle(function() {
         $(this).html(closebio).next('.bio').fadeIn();
     },function(){    
         $(this).html(showbio).next('.bio').fadeOut();
     });      
    })

请参阅http://jsfiddle.net/MBMef/1/

Answer 2

这有效：

$(".bio-link").click(function() {
    var bio = $(this).next('p');
    if (bio.is(":hidden")) {
        bio.fadeIn();
        $(this).html(closebio);
    } else {
        bio.fadeOut();
        $(this).html(showbio);
    }
});

http://jsfiddle.net/dxVNx/1/

此外，您应该使用var关键字声明HTML关闭/显示变量，并且不会丢失分号（只是为了衡量/练习）。

var closebio = "- CLOSE BIO";
var showbio = "+ READ BIO";

Answer 3

你可以使用jQuery的.next（）选择器; $(this).next().fadeIn();

防止类的所有引用受到触发函数的影响

3 个答案: